@opensite/ui 2.8.6 → 2.8.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/about-developer-profile.cjs +17 -10
- package/dist/about-developer-profile.js +17 -10
- package/dist/article-chapters-author.cjs +17 -10
- package/dist/article-chapters-author.js +17 -10
- package/dist/carousel-animated-sections.cjs +79 -25
- package/dist/carousel-animated-sections.d.cts +7 -2
- package/dist/carousel-animated-sections.d.ts +7 -2
- package/dist/carousel-animated-sections.js +79 -25
- package/dist/carousel-gallery-thumbnails.cjs +79 -25
- package/dist/carousel-gallery-thumbnails.d.cts +7 -2
- package/dist/carousel-gallery-thumbnails.d.ts +7 -2
- package/dist/carousel-gallery-thumbnails.js +79 -25
- package/dist/carousel-icon-sidebar.cjs +5 -4
- package/dist/carousel-icon-sidebar.js +5 -4
- package/dist/carousel-portfolio-hero.cjs +79 -25
- package/dist/carousel-portfolio-hero.d.cts +7 -2
- package/dist/carousel-portfolio-hero.d.ts +7 -2
- package/dist/carousel-portfolio-hero.js +79 -25
- package/dist/components.cjs +81 -42
- package/dist/components.d.cts +29 -2
- package/dist/components.d.ts +29 -2
- package/dist/components.js +81 -43
- package/dist/contact-map.cjs +46 -32
- package/dist/contact-map.js +46 -32
- package/dist/footer-accordion-social.cjs +17 -10
- package/dist/footer-accordion-social.js +17 -10
- package/dist/footer-animated-social.cjs +17 -10
- package/dist/footer-animated-social.js +17 -10
- package/dist/footer-brand-description.cjs +17 -10
- package/dist/footer-brand-description.js +17 -10
- package/dist/footer-brand-links-contact.cjs +17 -10
- package/dist/footer-brand-links-contact.js +17 -10
- package/dist/footer-comprehensive-links.cjs +17 -10
- package/dist/footer-comprehensive-links.js +17 -10
- package/dist/footer-contact-card.cjs +17 -10
- package/dist/footer-contact-card.js +17 -10
- package/dist/footer-cta-banner.cjs +17 -10
- package/dist/footer-cta-banner.js +17 -10
- package/dist/footer-cta-social.cjs +17 -10
- package/dist/footer-cta-social.js +17 -10
- package/dist/footer-info-cards-accordion.cjs +17 -10
- package/dist/footer-info-cards-accordion.js +17 -10
- package/dist/footer-nav-social.cjs +17 -10
- package/dist/footer-nav-social.js +17 -10
- package/dist/footer-newsletter-contact.cjs +17 -10
- package/dist/footer-newsletter-contact.js +17 -10
- package/dist/footer-newsletter-grid.cjs +17 -10
- package/dist/footer-newsletter-grid.js +17 -10
- package/dist/footer-newsletter-minimal.cjs +17 -10
- package/dist/footer-newsletter-minimal.js +17 -10
- package/dist/footer-social-apps.cjs +17 -10
- package/dist/footer-social-apps.js +17 -10
- package/dist/footer-social-newsletter.cjs +17 -10
- package/dist/footer-social-newsletter.js +17 -10
- package/dist/footer-split-image-accordion.cjs +17 -10
- package/dist/footer-split-image-accordion.js +17 -10
- package/dist/geo-map.cjs +46 -32
- package/dist/geo-map.js +46 -32
- package/dist/hero-coming-soon-countdown.cjs +17 -10
- package/dist/hero-coming-soon-countdown.js +17 -10
- package/dist/hero-video-background-dark.cjs +78 -16
- package/dist/hero-video-background-dark.d.cts +7 -2
- package/dist/hero-video-background-dark.d.ts +7 -2
- package/dist/hero-video-background-dark.js +78 -16
- package/dist/index.cjs +81 -42
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +81 -43
- package/dist/link-page-bento-layout.cjs +17 -10
- package/dist/link-page-bento-layout.js +17 -10
- package/dist/link-page-grid-cards.cjs +17 -10
- package/dist/link-page-grid-cards.js +17 -10
- package/dist/link-page-minimal-profile.cjs +17 -10
- package/dist/link-page-minimal-profile.js +17 -10
- package/dist/link-page-newsletter-social.cjs +17 -10
- package/dist/link-page-newsletter-social.js +17 -10
- package/dist/link-tree-block.cjs +17 -10
- package/dist/link-tree-block.js +17 -10
- package/dist/navbar-fullscreen-menu.cjs +17 -10
- package/dist/navbar-fullscreen-menu.js +17 -10
- package/dist/navbar-transparent-overlay.cjs +17 -10
- package/dist/navbar-transparent-overlay.js +17 -10
- package/dist/registry.cjs +967 -620
- package/dist/registry.js +967 -620
- package/dist/social-link-icon.cjs +17 -10
- package/dist/social-link-icon.d.cts +5 -0
- package/dist/social-link-icon.d.ts +5 -0
- package/dist/social-link-icon.js +17 -10
- package/dist/testimonials-bento-grid.cjs +1 -1
- package/dist/testimonials-bento-grid.js +1 -1
- package/dist/testimonials-carousel-image.cjs +16 -2
- package/dist/testimonials-carousel-image.d.cts +5 -1
- package/dist/testimonials-carousel-image.d.ts +5 -1
- package/dist/testimonials-carousel-image.js +16 -2
- package/dist/testimonials-centered-avatars.cjs +1 -1
- package/dist/testimonials-centered-avatars.js +1 -1
- package/dist/testimonials-grid-add-review.cjs +51 -29
- package/dist/testimonials-grid-add-review.js +51 -29
- package/dist/testimonials-images-helpful.cjs +181 -160
- package/dist/testimonials-images-helpful.d.cts +9 -1
- package/dist/testimonials-images-helpful.d.ts +9 -1
- package/dist/testimonials-images-helpful.js +181 -159
- package/dist/testimonials-large-quote.cjs +74 -43
- package/dist/testimonials-large-quote.d.cts +5 -1
- package/dist/testimonials-large-quote.d.ts +5 -1
- package/dist/testimonials-large-quote.js +74 -43
- package/dist/testimonials-list-verified.cjs +63 -44
- package/dist/testimonials-list-verified.d.cts +5 -1
- package/dist/testimonials-list-verified.d.ts +5 -1
- package/dist/testimonials-list-verified.js +64 -45
- package/dist/testimonials-logo-cards.cjs +55 -25
- package/dist/testimonials-logo-cards.d.cts +5 -1
- package/dist/testimonials-logo-cards.d.ts +5 -1
- package/dist/testimonials-logo-cards.js +55 -25
- package/dist/testimonials-marquee.cjs +440 -28
- package/dist/testimonials-marquee.js +441 -26
- package/dist/testimonials-masonry-grid.cjs +486 -69
- package/dist/testimonials-masonry-grid.d.cts +5 -1
- package/dist/testimonials-masonry-grid.d.ts +5 -1
- package/dist/testimonials-masonry-grid.js +483 -63
- package/dist/testimonials-mini-dividers.cjs +119 -83
- package/dist/testimonials-mini-dividers.d.cts +10 -6
- package/dist/testimonials-mini-dividers.d.ts +10 -6
- package/dist/testimonials-mini-dividers.js +119 -83
- package/dist/testimonials-minimal-numbered.cjs +9 -7
- package/dist/testimonials-minimal-numbered.d.cts +5 -1
- package/dist/testimonials-minimal-numbered.d.ts +5 -1
- package/dist/testimonials-minimal-numbered.js +9 -7
- package/dist/testimonials-parallax-number.cjs +14 -9
- package/dist/testimonials-parallax-number.js +14 -9
- package/dist/testimonials-scrolling-columns.cjs +100 -21
- package/dist/testimonials-scrolling-columns.js +100 -21
- package/dist/testimonials-simple-grid.cjs +22 -5
- package/dist/testimonials-simple-grid.js +22 -5
- package/dist/testimonials-slider-minimal.cjs +1 -1
- package/dist/testimonials-slider-minimal.js +1 -1
- package/dist/testimonials-stats-header.cjs +528 -87
- package/dist/testimonials-stats-header.d.cts +39 -3
- package/dist/testimonials-stats-header.d.ts +39 -3
- package/dist/testimonials-stats-header.js +523 -82
- package/dist/testimonials-twitter-cards.cjs +20 -12
- package/dist/testimonials-twitter-cards.js +20 -12
- package/package.json +11 -1
|
@@ -41,6 +41,23 @@ var DynamicIcon = React__namespace.memo(function DynamicIcon2({
|
|
|
41
41
|
return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
|
|
42
42
|
});
|
|
43
43
|
DynamicIcon.displayName = "DynamicIcon";
|
|
44
|
+
function StarRating({
|
|
45
|
+
rating,
|
|
46
|
+
size = 18,
|
|
47
|
+
className
|
|
48
|
+
}) {
|
|
49
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-0.5", className), children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
50
|
+
DynamicIcon,
|
|
51
|
+
{
|
|
52
|
+
name: "icon-park-solid/star",
|
|
53
|
+
size,
|
|
54
|
+
className: cn(
|
|
55
|
+
star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
|
|
56
|
+
)
|
|
57
|
+
},
|
|
58
|
+
star
|
|
59
|
+
)) });
|
|
60
|
+
}
|
|
44
61
|
function Avatar({
|
|
45
62
|
className,
|
|
46
63
|
...props
|
|
@@ -462,19 +479,6 @@ var Section = React__namespace.default.forwardRef(
|
|
|
462
479
|
}
|
|
463
480
|
);
|
|
464
481
|
Section.displayName = "Section";
|
|
465
|
-
function StarRating({ rating, size = 14 }) {
|
|
466
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
467
|
-
DynamicIcon,
|
|
468
|
-
{
|
|
469
|
-
name: "lucide/star",
|
|
470
|
-
size,
|
|
471
|
-
className: cn(
|
|
472
|
-
star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
|
|
473
|
-
)
|
|
474
|
-
},
|
|
475
|
-
star
|
|
476
|
-
)) });
|
|
477
|
-
}
|
|
478
482
|
function TestimonialsMiniDividers({
|
|
479
483
|
testimonials,
|
|
480
484
|
testimonialsSlot,
|
|
@@ -489,101 +493,133 @@ function TestimonialsMiniDividers({
|
|
|
489
493
|
quoteClassName,
|
|
490
494
|
authorClassName,
|
|
491
495
|
background,
|
|
492
|
-
spacing,
|
|
496
|
+
spacing = "lg",
|
|
497
|
+
containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
|
|
493
498
|
pattern,
|
|
494
499
|
patternOpacity
|
|
495
500
|
}) {
|
|
496
|
-
const getAuthorName = React.useCallback(
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
501
|
+
const getAuthorName = React.useCallback(
|
|
502
|
+
(testimonial) => {
|
|
503
|
+
if (typeof testimonial.author === "string") return testimonial.author;
|
|
504
|
+
return "";
|
|
505
|
+
},
|
|
506
|
+
[]
|
|
507
|
+
);
|
|
508
|
+
const getAvatarSrc = React.useCallback(
|
|
509
|
+
(testimonial) => {
|
|
510
|
+
return testimonial.avatarSrc || testimonial.avatar?.src;
|
|
511
|
+
},
|
|
512
|
+
[]
|
|
513
|
+
);
|
|
503
514
|
const getInitials = React.useCallback((name) => {
|
|
504
515
|
return name.split(" ").map((n) => n[0]).join("");
|
|
505
516
|
}, []);
|
|
506
517
|
const renderedTestimonials = React.useMemo(() => {
|
|
507
518
|
if (testimonialsSlot) return testimonialsSlot;
|
|
508
519
|
if (!testimonials || testimonials.length === 0) return null;
|
|
509
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
520
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
510
521
|
"div",
|
|
511
522
|
{
|
|
512
523
|
className: cn(
|
|
513
|
-
"
|
|
524
|
+
"relative grid border-x border-b border-dashed md:grid-cols-3",
|
|
514
525
|
gridClassName
|
|
515
526
|
),
|
|
516
|
-
children:
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
520
|
-
"div",
|
|
527
|
+
children: [
|
|
528
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
529
|
+
DynamicIcon,
|
|
521
530
|
{
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
children: [
|
|
549
|
-
/* @__PURE__ */ jsxRuntime.
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
/* @__PURE__ */ jsxRuntime.
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
531
|
+
name: "lucide/sparkle",
|
|
532
|
+
size: 20,
|
|
533
|
+
className: "absolute top-0 right-0 translate-x-2.5 -translate-y-2.5 fill-primary"
|
|
534
|
+
}
|
|
535
|
+
),
|
|
536
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
537
|
+
DynamicIcon,
|
|
538
|
+
{
|
|
539
|
+
name: "lucide/sparkle",
|
|
540
|
+
size: 20,
|
|
541
|
+
className: "absolute top-0 left-0 -translate-x-2.5 -translate-y-2.5 fill-primary"
|
|
542
|
+
}
|
|
543
|
+
),
|
|
544
|
+
testimonials.map((testimonial, index) => {
|
|
545
|
+
const authorName = getAuthorName(testimonial);
|
|
546
|
+
const avatarSrc = getAvatarSrc(testimonial);
|
|
547
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
548
|
+
"div",
|
|
549
|
+
{
|
|
550
|
+
className: cn(
|
|
551
|
+
"group flex flex-col gap-4 border-t border-dashed p-4 transition-colors duration-300 hover:bg-muted/50 lg:p-8",
|
|
552
|
+
index % 3 === 1 && "md:border-x md:border-dashed",
|
|
553
|
+
itemClassName
|
|
554
|
+
),
|
|
555
|
+
children: [
|
|
556
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
|
|
557
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-10 shrink-0 rounded-md bg-card shadow-sm lg:size-12", children: [
|
|
558
|
+
/* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
|
|
559
|
+
/* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "rounded-md bg-card text-card-foreground text-sm", children: getInitials(authorName) })
|
|
560
|
+
] }),
|
|
561
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("min-w-0", authorClassName), children: [
|
|
562
|
+
testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate font-medium", children: testimonial.author }) : testimonial.author),
|
|
563
|
+
testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm text-muted-foreground", children: testimonial.role }) : testimonial.role)
|
|
564
|
+
] })
|
|
565
|
+
] }),
|
|
566
|
+
testimonial.rating != null && /* @__PURE__ */ jsxRuntime.jsx(StarRating, { rating: testimonial.rating }),
|
|
567
|
+
testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
568
|
+
"p",
|
|
569
|
+
{
|
|
570
|
+
className: cn(
|
|
571
|
+
"text-sm leading-relaxed text-muted-foreground",
|
|
572
|
+
quoteClassName
|
|
573
|
+
),
|
|
574
|
+
children: [
|
|
575
|
+
"\u201C",
|
|
576
|
+
testimonial.quote,
|
|
577
|
+
"\u201D"
|
|
578
|
+
]
|
|
579
|
+
}
|
|
580
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm", quoteClassName), children: testimonial.quote }))
|
|
581
|
+
]
|
|
582
|
+
},
|
|
583
|
+
index
|
|
584
|
+
);
|
|
585
|
+
})
|
|
586
|
+
]
|
|
565
587
|
}
|
|
566
588
|
);
|
|
567
|
-
}, [
|
|
568
|
-
|
|
589
|
+
}, [
|
|
590
|
+
testimonialsSlot,
|
|
591
|
+
gridClassName,
|
|
592
|
+
testimonials,
|
|
593
|
+
itemClassName,
|
|
594
|
+
quoteClassName,
|
|
595
|
+
authorClassName,
|
|
596
|
+
getAuthorName,
|
|
597
|
+
getAvatarSrc,
|
|
598
|
+
getInitials
|
|
599
|
+
]);
|
|
600
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
569
601
|
Section,
|
|
570
602
|
{
|
|
571
603
|
background,
|
|
572
604
|
spacing,
|
|
573
605
|
pattern,
|
|
574
606
|
patternOpacity,
|
|
575
|
-
className,
|
|
576
|
-
|
|
577
|
-
|
|
607
|
+
className: cn("relative flex items-center justify-center", className),
|
|
608
|
+
containerClassName,
|
|
609
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
610
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
578
611
|
"div",
|
|
579
612
|
{
|
|
580
|
-
className: cn(
|
|
581
|
-
|
|
613
|
+
className: cn(
|
|
614
|
+
"border-x border-t border-dashed px-4 py-6 md:py-16 md:px-16",
|
|
615
|
+
headerClassName
|
|
616
|
+
),
|
|
617
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl", children: [
|
|
582
618
|
heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
583
619
|
"h2",
|
|
584
620
|
{
|
|
585
621
|
className: cn(
|
|
586
|
-
"text-3xl font-semibold tracking-tight md:text-4xl",
|
|
622
|
+
"text-center text-3xl font-semibold tracking-tight md:text-4xl",
|
|
587
623
|
headingClassName
|
|
588
624
|
),
|
|
589
625
|
children: heading
|
|
@@ -593,17 +629,17 @@ function TestimonialsMiniDividers({
|
|
|
593
629
|
"p",
|
|
594
630
|
{
|
|
595
631
|
className: cn(
|
|
596
|
-
"mt-4 text-lg text-
|
|
632
|
+
"mx-auto mt-4 max-w-2xl text-center text-lg text-balance",
|
|
597
633
|
descriptionClassName
|
|
598
634
|
),
|
|
599
635
|
children: description
|
|
600
636
|
}
|
|
601
|
-
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className:
|
|
602
|
-
]
|
|
637
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
|
|
638
|
+
] })
|
|
603
639
|
}
|
|
604
640
|
),
|
|
605
641
|
renderedTestimonials
|
|
606
|
-
]
|
|
642
|
+
] })
|
|
607
643
|
}
|
|
608
644
|
);
|
|
609
645
|
}
|
|
@@ -81,13 +81,17 @@ interface TestimonialsMiniDividersProps {
|
|
|
81
81
|
* Pattern overlay opacity (0-1)
|
|
82
82
|
*/
|
|
83
83
|
patternOpacity?: number;
|
|
84
|
+
/**
|
|
85
|
+
* Additional CSS classes for the container
|
|
86
|
+
*/
|
|
87
|
+
containerClassName?: string;
|
|
84
88
|
}
|
|
85
89
|
/**
|
|
86
|
-
* TestimonialsMiniDividers - A grid of compact testimonial cards
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
* format.
|
|
90
|
+
* TestimonialsMiniDividers - A grid of compact testimonial cards with dashed border
|
|
91
|
+
* styling and sparkle decorations. Each card displays a short quote, star rating,
|
|
92
|
+
* author avatar, name, and role inside a structured dashed-border layout inspired
|
|
93
|
+
* by the hero-dashed-border-features pattern. Ideal for displaying multiple brief
|
|
94
|
+
* testimonials in a visually distinctive, scannable format.
|
|
91
95
|
*
|
|
92
96
|
* @example
|
|
93
97
|
* ```tsx
|
|
@@ -108,6 +112,6 @@ interface TestimonialsMiniDividersProps {
|
|
|
108
112
|
* />
|
|
109
113
|
* ```
|
|
110
114
|
*/
|
|
111
|
-
declare function TestimonialsMiniDividers({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, itemClassName, quoteClassName, authorClassName, background, spacing, pattern, patternOpacity, }: TestimonialsMiniDividersProps): React.JSX.Element;
|
|
115
|
+
declare function TestimonialsMiniDividers({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, itemClassName, quoteClassName, authorClassName, background, spacing, containerClassName, pattern, patternOpacity, }: TestimonialsMiniDividersProps): React.JSX.Element;
|
|
112
116
|
|
|
113
117
|
export { type MiniTestimonialItem, TestimonialsMiniDividers, type TestimonialsMiniDividersProps };
|
|
@@ -81,13 +81,17 @@ interface TestimonialsMiniDividersProps {
|
|
|
81
81
|
* Pattern overlay opacity (0-1)
|
|
82
82
|
*/
|
|
83
83
|
patternOpacity?: number;
|
|
84
|
+
/**
|
|
85
|
+
* Additional CSS classes for the container
|
|
86
|
+
*/
|
|
87
|
+
containerClassName?: string;
|
|
84
88
|
}
|
|
85
89
|
/**
|
|
86
|
-
* TestimonialsMiniDividers - A grid of compact testimonial cards
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
* format.
|
|
90
|
+
* TestimonialsMiniDividers - A grid of compact testimonial cards with dashed border
|
|
91
|
+
* styling and sparkle decorations. Each card displays a short quote, star rating,
|
|
92
|
+
* author avatar, name, and role inside a structured dashed-border layout inspired
|
|
93
|
+
* by the hero-dashed-border-features pattern. Ideal for displaying multiple brief
|
|
94
|
+
* testimonials in a visually distinctive, scannable format.
|
|
91
95
|
*
|
|
92
96
|
* @example
|
|
93
97
|
* ```tsx
|
|
@@ -108,6 +112,6 @@ interface TestimonialsMiniDividersProps {
|
|
|
108
112
|
* />
|
|
109
113
|
* ```
|
|
110
114
|
*/
|
|
111
|
-
declare function TestimonialsMiniDividers({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, itemClassName, quoteClassName, authorClassName, background, spacing, pattern, patternOpacity, }: TestimonialsMiniDividersProps): React.JSX.Element;
|
|
115
|
+
declare function TestimonialsMiniDividers({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, itemClassName, quoteClassName, authorClassName, background, spacing, containerClassName, pattern, patternOpacity, }: TestimonialsMiniDividersProps): React.JSX.Element;
|
|
112
116
|
|
|
113
117
|
export { type MiniTestimonialItem, TestimonialsMiniDividers, type TestimonialsMiniDividersProps };
|
|
@@ -19,6 +19,23 @@ var DynamicIcon = React.memo(function DynamicIcon2({
|
|
|
19
19
|
return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
|
|
20
20
|
});
|
|
21
21
|
DynamicIcon.displayName = "DynamicIcon";
|
|
22
|
+
function StarRating({
|
|
23
|
+
rating,
|
|
24
|
+
size = 18,
|
|
25
|
+
className
|
|
26
|
+
}) {
|
|
27
|
+
return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-0.5", className), children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx(
|
|
28
|
+
DynamicIcon,
|
|
29
|
+
{
|
|
30
|
+
name: "icon-park-solid/star",
|
|
31
|
+
size,
|
|
32
|
+
className: cn(
|
|
33
|
+
star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
|
|
34
|
+
)
|
|
35
|
+
},
|
|
36
|
+
star
|
|
37
|
+
)) });
|
|
38
|
+
}
|
|
22
39
|
function Avatar({
|
|
23
40
|
className,
|
|
24
41
|
...props
|
|
@@ -440,19 +457,6 @@ var Section = React__default.forwardRef(
|
|
|
440
457
|
}
|
|
441
458
|
);
|
|
442
459
|
Section.displayName = "Section";
|
|
443
|
-
function StarRating({ rating, size = 14 }) {
|
|
444
|
-
return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx(
|
|
445
|
-
DynamicIcon,
|
|
446
|
-
{
|
|
447
|
-
name: "lucide/star",
|
|
448
|
-
size,
|
|
449
|
-
className: cn(
|
|
450
|
-
star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
|
|
451
|
-
)
|
|
452
|
-
},
|
|
453
|
-
star
|
|
454
|
-
)) });
|
|
455
|
-
}
|
|
456
460
|
function TestimonialsMiniDividers({
|
|
457
461
|
testimonials,
|
|
458
462
|
testimonialsSlot,
|
|
@@ -467,101 +471,133 @@ function TestimonialsMiniDividers({
|
|
|
467
471
|
quoteClassName,
|
|
468
472
|
authorClassName,
|
|
469
473
|
background,
|
|
470
|
-
spacing,
|
|
474
|
+
spacing = "lg",
|
|
475
|
+
containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
|
|
471
476
|
pattern,
|
|
472
477
|
patternOpacity
|
|
473
478
|
}) {
|
|
474
|
-
const getAuthorName = useCallback(
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
479
|
+
const getAuthorName = useCallback(
|
|
480
|
+
(testimonial) => {
|
|
481
|
+
if (typeof testimonial.author === "string") return testimonial.author;
|
|
482
|
+
return "";
|
|
483
|
+
},
|
|
484
|
+
[]
|
|
485
|
+
);
|
|
486
|
+
const getAvatarSrc = useCallback(
|
|
487
|
+
(testimonial) => {
|
|
488
|
+
return testimonial.avatarSrc || testimonial.avatar?.src;
|
|
489
|
+
},
|
|
490
|
+
[]
|
|
491
|
+
);
|
|
481
492
|
const getInitials = useCallback((name) => {
|
|
482
493
|
return name.split(" ").map((n) => n[0]).join("");
|
|
483
494
|
}, []);
|
|
484
495
|
const renderedTestimonials = useMemo(() => {
|
|
485
496
|
if (testimonialsSlot) return testimonialsSlot;
|
|
486
497
|
if (!testimonials || testimonials.length === 0) return null;
|
|
487
|
-
return /* @__PURE__ */
|
|
498
|
+
return /* @__PURE__ */ jsxs(
|
|
488
499
|
"div",
|
|
489
500
|
{
|
|
490
501
|
className: cn(
|
|
491
|
-
"
|
|
502
|
+
"relative grid border-x border-b border-dashed md:grid-cols-3",
|
|
492
503
|
gridClassName
|
|
493
504
|
),
|
|
494
|
-
children:
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
return /* @__PURE__ */ jsxs(
|
|
498
|
-
"div",
|
|
505
|
+
children: [
|
|
506
|
+
/* @__PURE__ */ jsx(
|
|
507
|
+
DynamicIcon,
|
|
499
508
|
{
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
children: [
|
|
527
|
-
/* @__PURE__ */
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
/* @__PURE__ */
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
509
|
+
name: "lucide/sparkle",
|
|
510
|
+
size: 20,
|
|
511
|
+
className: "absolute top-0 right-0 translate-x-2.5 -translate-y-2.5 fill-primary"
|
|
512
|
+
}
|
|
513
|
+
),
|
|
514
|
+
/* @__PURE__ */ jsx(
|
|
515
|
+
DynamicIcon,
|
|
516
|
+
{
|
|
517
|
+
name: "lucide/sparkle",
|
|
518
|
+
size: 20,
|
|
519
|
+
className: "absolute top-0 left-0 -translate-x-2.5 -translate-y-2.5 fill-primary"
|
|
520
|
+
}
|
|
521
|
+
),
|
|
522
|
+
testimonials.map((testimonial, index) => {
|
|
523
|
+
const authorName = getAuthorName(testimonial);
|
|
524
|
+
const avatarSrc = getAvatarSrc(testimonial);
|
|
525
|
+
return /* @__PURE__ */ jsxs(
|
|
526
|
+
"div",
|
|
527
|
+
{
|
|
528
|
+
className: cn(
|
|
529
|
+
"group flex flex-col gap-4 border-t border-dashed p-4 transition-colors duration-300 hover:bg-muted/50 lg:p-8",
|
|
530
|
+
index % 3 === 1 && "md:border-x md:border-dashed",
|
|
531
|
+
itemClassName
|
|
532
|
+
),
|
|
533
|
+
children: [
|
|
534
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
|
|
535
|
+
/* @__PURE__ */ jsxs(Avatar, { className: "size-10 shrink-0 rounded-md bg-card shadow-sm lg:size-12", children: [
|
|
536
|
+
/* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
|
|
537
|
+
/* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-md bg-card text-card-foreground text-sm", children: getInitials(authorName) })
|
|
538
|
+
] }),
|
|
539
|
+
/* @__PURE__ */ jsxs("div", { className: cn("min-w-0", authorClassName), children: [
|
|
540
|
+
testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "truncate font-medium", children: testimonial.author }) : testimonial.author),
|
|
541
|
+
testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-muted-foreground", children: testimonial.role }) : testimonial.role)
|
|
542
|
+
] })
|
|
543
|
+
] }),
|
|
544
|
+
testimonial.rating != null && /* @__PURE__ */ jsx(StarRating, { rating: testimonial.rating }),
|
|
545
|
+
testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs(
|
|
546
|
+
"p",
|
|
547
|
+
{
|
|
548
|
+
className: cn(
|
|
549
|
+
"text-sm leading-relaxed text-muted-foreground",
|
|
550
|
+
quoteClassName
|
|
551
|
+
),
|
|
552
|
+
children: [
|
|
553
|
+
"\u201C",
|
|
554
|
+
testimonial.quote,
|
|
555
|
+
"\u201D"
|
|
556
|
+
]
|
|
557
|
+
}
|
|
558
|
+
) : /* @__PURE__ */ jsx("div", { className: cn("text-sm", quoteClassName), children: testimonial.quote }))
|
|
559
|
+
]
|
|
560
|
+
},
|
|
561
|
+
index
|
|
562
|
+
);
|
|
563
|
+
})
|
|
564
|
+
]
|
|
543
565
|
}
|
|
544
566
|
);
|
|
545
|
-
}, [
|
|
546
|
-
|
|
567
|
+
}, [
|
|
568
|
+
testimonialsSlot,
|
|
569
|
+
gridClassName,
|
|
570
|
+
testimonials,
|
|
571
|
+
itemClassName,
|
|
572
|
+
quoteClassName,
|
|
573
|
+
authorClassName,
|
|
574
|
+
getAuthorName,
|
|
575
|
+
getAvatarSrc,
|
|
576
|
+
getInitials
|
|
577
|
+
]);
|
|
578
|
+
return /* @__PURE__ */ jsx(
|
|
547
579
|
Section,
|
|
548
580
|
{
|
|
549
581
|
background,
|
|
550
582
|
spacing,
|
|
551
583
|
pattern,
|
|
552
584
|
patternOpacity,
|
|
553
|
-
className,
|
|
554
|
-
|
|
555
|
-
|
|
585
|
+
className: cn("relative flex items-center justify-center", className),
|
|
586
|
+
containerClassName,
|
|
587
|
+
children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
588
|
+
/* @__PURE__ */ jsx(
|
|
556
589
|
"div",
|
|
557
590
|
{
|
|
558
|
-
className: cn(
|
|
559
|
-
|
|
591
|
+
className: cn(
|
|
592
|
+
"border-x border-t border-dashed px-4 py-6 md:py-16 md:px-16",
|
|
593
|
+
headerClassName
|
|
594
|
+
),
|
|
595
|
+
children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl", children: [
|
|
560
596
|
heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
|
|
561
597
|
"h2",
|
|
562
598
|
{
|
|
563
599
|
className: cn(
|
|
564
|
-
"text-3xl font-semibold tracking-tight md:text-4xl",
|
|
600
|
+
"text-center text-3xl font-semibold tracking-tight md:text-4xl",
|
|
565
601
|
headingClassName
|
|
566
602
|
),
|
|
567
603
|
children: heading
|
|
@@ -571,17 +607,17 @@ function TestimonialsMiniDividers({
|
|
|
571
607
|
"p",
|
|
572
608
|
{
|
|
573
609
|
className: cn(
|
|
574
|
-
"mt-4 text-lg text-
|
|
610
|
+
"mx-auto mt-4 max-w-2xl text-center text-lg text-balance",
|
|
575
611
|
descriptionClassName
|
|
576
612
|
),
|
|
577
613
|
children: description
|
|
578
614
|
}
|
|
579
|
-
) : /* @__PURE__ */ jsx("div", { className:
|
|
580
|
-
]
|
|
615
|
+
) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
|
|
616
|
+
] })
|
|
581
617
|
}
|
|
582
618
|
),
|
|
583
619
|
renderedTestimonials
|
|
584
|
-
]
|
|
620
|
+
] })
|
|
585
621
|
}
|
|
586
622
|
);
|
|
587
623
|
}
|