@opensite/ui 2.8.5 → 2.8.7
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-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 +35 -10
- package/dist/components.d.cts +29 -2
- package/dist/components.d.ts +29 -2
- package/dist/components.js +35 -11
- 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/hero-badge-shadow-overlay.cjs +1 -1
- package/dist/hero-badge-shadow-overlay.js +1 -1
- 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 +35 -10
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +35 -11
- 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 +1398 -851
- package/dist/registry.js +1398 -851
- 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-animated-split.cjs +5 -5
- package/dist/testimonials-animated-split.js +5 -5
- package/dist/testimonials-bento-grid.cjs +48 -56
- package/dist/testimonials-bento-grid.js +48 -56
- package/dist/testimonials-carousel-image.cjs +608 -96
- package/dist/testimonials-carousel-image.d.cts +26 -2
- package/dist/testimonials-carousel-image.d.ts +26 -2
- package/dist/testimonials-carousel-image.js +609 -97
- package/dist/testimonials-centered-avatars.cjs +89 -62
- package/dist/testimonials-centered-avatars.d.cts +5 -1
- package/dist/testimonials-centered-avatars.d.ts +5 -1
- package/dist/testimonials-centered-avatars.js +89 -62
- package/dist/testimonials-company-logo.cjs +6 -6
- package/dist/testimonials-company-logo.js +6 -6
- 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-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 +53 -29
- package/dist/testimonials-logo-cards.d.cts +5 -1
- package/dist/testimonials-logo-cards.d.ts +5 -1
- package/dist/testimonials-logo-cards.js +53 -29
- package/dist/testimonials-marquee.cjs +524 -102
- package/dist/testimonials-marquee.d.cts +5 -1
- package/dist/testimonials-marquee.d.ts +5 -1
- package/dist/testimonials-marquee.js +525 -100
- package/dist/testimonials-mini-dividers.cjs +120 -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 +120 -83
- package/dist/testimonials-minimal-numbered.cjs +7 -6
- package/dist/testimonials-minimal-numbered.d.cts +5 -1
- package/dist/testimonials-minimal-numbered.d.ts +5 -1
- package/dist/testimonials-minimal-numbered.js +7 -6
- package/dist/testimonials-parallax-number.cjs +14 -8
- package/dist/testimonials-parallax-number.js +14 -8
- package/dist/testimonials-scrolling-columns.cjs +97 -13
- package/dist/testimonials-scrolling-columns.js +97 -13
- package/dist/testimonials-simple-grid.cjs +513 -68
- package/dist/testimonials-simple-grid.d.cts +9 -5
- package/dist/testimonials-simple-grid.d.ts +9 -5
- package/dist/testimonials-simple-grid.js +510 -62
- package/dist/testimonials-slider-minimal.cjs +604 -90
- package/dist/testimonials-slider-minimal.d.cts +17 -1
- package/dist/testimonials-slider-minimal.d.ts +17 -1
- package/dist/testimonials-slider-minimal.js +598 -81
- package/dist/testimonials-split-image.cjs +452 -17
- package/dist/testimonials-split-image.js +448 -13
- package/dist/testimonials-twitter-cards.cjs +26 -14
- package/dist/testimonials-twitter-cards.js +26 -14
- 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,134 @@ 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-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
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
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 === 1 && "md:border-x md:border-dashed",
|
|
553
|
+
index === 2 ? "border-b" : "md:border-b",
|
|
554
|
+
itemClassName
|
|
555
|
+
),
|
|
556
|
+
children: [
|
|
557
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
|
|
558
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-10 shrink-0 rounded-md bg-card shadow-sm lg:size-12", children: [
|
|
559
|
+
/* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
|
|
560
|
+
/* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "rounded-md bg-card text-card-foreground text-sm", children: getInitials(authorName) })
|
|
561
|
+
] }),
|
|
562
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("min-w-0", authorClassName), children: [
|
|
563
|
+
testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate font-medium", children: testimonial.author }) : testimonial.author),
|
|
564
|
+
testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm text-muted-foreground", children: testimonial.role }) : testimonial.role)
|
|
565
|
+
] })
|
|
566
|
+
] }),
|
|
567
|
+
testimonial.rating != null && /* @__PURE__ */ jsxRuntime.jsx(StarRating, { rating: testimonial.rating }),
|
|
568
|
+
testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
569
|
+
"p",
|
|
570
|
+
{
|
|
571
|
+
className: cn(
|
|
572
|
+
"text-sm leading-relaxed text-muted-foreground",
|
|
573
|
+
quoteClassName
|
|
574
|
+
),
|
|
575
|
+
children: [
|
|
576
|
+
"\u201C",
|
|
577
|
+
testimonial.quote,
|
|
578
|
+
"\u201D"
|
|
579
|
+
]
|
|
580
|
+
}
|
|
581
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm", quoteClassName), children: testimonial.quote }))
|
|
582
|
+
]
|
|
583
|
+
},
|
|
584
|
+
index
|
|
585
|
+
);
|
|
586
|
+
})
|
|
587
|
+
]
|
|
565
588
|
}
|
|
566
589
|
);
|
|
567
|
-
}, [
|
|
568
|
-
|
|
590
|
+
}, [
|
|
591
|
+
testimonialsSlot,
|
|
592
|
+
gridClassName,
|
|
593
|
+
testimonials,
|
|
594
|
+
itemClassName,
|
|
595
|
+
quoteClassName,
|
|
596
|
+
authorClassName,
|
|
597
|
+
getAuthorName,
|
|
598
|
+
getAvatarSrc,
|
|
599
|
+
getInitials
|
|
600
|
+
]);
|
|
601
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
569
602
|
Section,
|
|
570
603
|
{
|
|
571
604
|
background,
|
|
572
605
|
spacing,
|
|
573
606
|
pattern,
|
|
574
607
|
patternOpacity,
|
|
575
|
-
className,
|
|
576
|
-
|
|
577
|
-
|
|
608
|
+
className: cn("relative flex items-center justify-center", className),
|
|
609
|
+
containerClassName,
|
|
610
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
611
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
578
612
|
"div",
|
|
579
613
|
{
|
|
580
|
-
className: cn(
|
|
581
|
-
|
|
614
|
+
className: cn(
|
|
615
|
+
"border-x border-t border-dashed px-4 py-6 md:py-16 md:px-16",
|
|
616
|
+
headerClassName
|
|
617
|
+
),
|
|
618
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl", children: [
|
|
582
619
|
heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
583
620
|
"h2",
|
|
584
621
|
{
|
|
585
622
|
className: cn(
|
|
586
|
-
"text-3xl font-semibold tracking-tight md:text-4xl",
|
|
623
|
+
"text-center text-3xl font-semibold tracking-tight md:text-4xl",
|
|
587
624
|
headingClassName
|
|
588
625
|
),
|
|
589
626
|
children: heading
|
|
@@ -593,17 +630,17 @@ function TestimonialsMiniDividers({
|
|
|
593
630
|
"p",
|
|
594
631
|
{
|
|
595
632
|
className: cn(
|
|
596
|
-
"mt-4 text-lg text-
|
|
633
|
+
"mx-auto mt-4 max-w-2xl text-center text-lg text-balance",
|
|
597
634
|
descriptionClassName
|
|
598
635
|
),
|
|
599
636
|
children: description
|
|
600
637
|
}
|
|
601
|
-
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className:
|
|
602
|
-
]
|
|
638
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
|
|
639
|
+
] })
|
|
603
640
|
}
|
|
604
641
|
),
|
|
605
642
|
renderedTestimonials
|
|
606
|
-
]
|
|
643
|
+
] })
|
|
607
644
|
}
|
|
608
645
|
);
|
|
609
646
|
}
|
|
@@ -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,134 @@ 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-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
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
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 === 1 && "md:border-x md:border-dashed",
|
|
531
|
+
index === 2 ? "border-b" : "md:border-b",
|
|
532
|
+
itemClassName
|
|
533
|
+
),
|
|
534
|
+
children: [
|
|
535
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
|
|
536
|
+
/* @__PURE__ */ jsxs(Avatar, { className: "size-10 shrink-0 rounded-md bg-card shadow-sm lg:size-12", children: [
|
|
537
|
+
/* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
|
|
538
|
+
/* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-md bg-card text-card-foreground text-sm", children: getInitials(authorName) })
|
|
539
|
+
] }),
|
|
540
|
+
/* @__PURE__ */ jsxs("div", { className: cn("min-w-0", authorClassName), children: [
|
|
541
|
+
testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "truncate font-medium", children: testimonial.author }) : testimonial.author),
|
|
542
|
+
testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-muted-foreground", children: testimonial.role }) : testimonial.role)
|
|
543
|
+
] })
|
|
544
|
+
] }),
|
|
545
|
+
testimonial.rating != null && /* @__PURE__ */ jsx(StarRating, { rating: testimonial.rating }),
|
|
546
|
+
testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs(
|
|
547
|
+
"p",
|
|
548
|
+
{
|
|
549
|
+
className: cn(
|
|
550
|
+
"text-sm leading-relaxed text-muted-foreground",
|
|
551
|
+
quoteClassName
|
|
552
|
+
),
|
|
553
|
+
children: [
|
|
554
|
+
"\u201C",
|
|
555
|
+
testimonial.quote,
|
|
556
|
+
"\u201D"
|
|
557
|
+
]
|
|
558
|
+
}
|
|
559
|
+
) : /* @__PURE__ */ jsx("div", { className: cn("text-sm", quoteClassName), children: testimonial.quote }))
|
|
560
|
+
]
|
|
561
|
+
},
|
|
562
|
+
index
|
|
563
|
+
);
|
|
564
|
+
})
|
|
565
|
+
]
|
|
543
566
|
}
|
|
544
567
|
);
|
|
545
|
-
}, [
|
|
546
|
-
|
|
568
|
+
}, [
|
|
569
|
+
testimonialsSlot,
|
|
570
|
+
gridClassName,
|
|
571
|
+
testimonials,
|
|
572
|
+
itemClassName,
|
|
573
|
+
quoteClassName,
|
|
574
|
+
authorClassName,
|
|
575
|
+
getAuthorName,
|
|
576
|
+
getAvatarSrc,
|
|
577
|
+
getInitials
|
|
578
|
+
]);
|
|
579
|
+
return /* @__PURE__ */ jsx(
|
|
547
580
|
Section,
|
|
548
581
|
{
|
|
549
582
|
background,
|
|
550
583
|
spacing,
|
|
551
584
|
pattern,
|
|
552
585
|
patternOpacity,
|
|
553
|
-
className,
|
|
554
|
-
|
|
555
|
-
|
|
586
|
+
className: cn("relative flex items-center justify-center", className),
|
|
587
|
+
containerClassName,
|
|
588
|
+
children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
589
|
+
/* @__PURE__ */ jsx(
|
|
556
590
|
"div",
|
|
557
591
|
{
|
|
558
|
-
className: cn(
|
|
559
|
-
|
|
592
|
+
className: cn(
|
|
593
|
+
"border-x border-t border-dashed px-4 py-6 md:py-16 md:px-16",
|
|
594
|
+
headerClassName
|
|
595
|
+
),
|
|
596
|
+
children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl", children: [
|
|
560
597
|
heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
|
|
561
598
|
"h2",
|
|
562
599
|
{
|
|
563
600
|
className: cn(
|
|
564
|
-
"text-3xl font-semibold tracking-tight md:text-4xl",
|
|
601
|
+
"text-center text-3xl font-semibold tracking-tight md:text-4xl",
|
|
565
602
|
headingClassName
|
|
566
603
|
),
|
|
567
604
|
children: heading
|
|
@@ -571,17 +608,17 @@ function TestimonialsMiniDividers({
|
|
|
571
608
|
"p",
|
|
572
609
|
{
|
|
573
610
|
className: cn(
|
|
574
|
-
"mt-4 text-lg text-
|
|
611
|
+
"mx-auto mt-4 max-w-2xl text-center text-lg text-balance",
|
|
575
612
|
descriptionClassName
|
|
576
613
|
),
|
|
577
614
|
children: description
|
|
578
615
|
}
|
|
579
|
-
) : /* @__PURE__ */ jsx("div", { className:
|
|
580
|
-
]
|
|
616
|
+
) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
|
|
617
|
+
] })
|
|
581
618
|
}
|
|
582
619
|
),
|
|
583
620
|
renderedTestimonials
|
|
584
|
-
]
|
|
621
|
+
] })
|
|
585
622
|
}
|
|
586
623
|
);
|
|
587
624
|
}
|
|
@@ -473,7 +473,8 @@ function TestimonialsMinimalNumbered({
|
|
|
473
473
|
authorClassName,
|
|
474
474
|
navigationClassName,
|
|
475
475
|
background,
|
|
476
|
-
spacing,
|
|
476
|
+
spacing = "lg",
|
|
477
|
+
containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
|
|
477
478
|
pattern,
|
|
478
479
|
patternOpacity
|
|
479
480
|
}) {
|
|
@@ -531,14 +532,14 @@ function TestimonialsMinimalNumbered({
|
|
|
531
532
|
"span",
|
|
532
533
|
{
|
|
533
534
|
className: cn(
|
|
534
|
-
"text-8xl font-light leading-none select-none transition-all duration-500 md:text-9xl",
|
|
535
|
+
"text-4xl md:text-8xl font-light leading-none select-none transition-all duration-500 md:text-9xl",
|
|
535
536
|
numberClassName
|
|
536
537
|
),
|
|
537
538
|
style: { fontFeatureSettings: '"tnum"' },
|
|
538
539
|
children: String(active + 1).padStart(2, "0")
|
|
539
540
|
}
|
|
540
541
|
),
|
|
541
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 pt-6", children: [
|
|
542
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 pt-0 md:pt-6", children: [
|
|
542
543
|
current.quote && (typeof current.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
543
544
|
"blockquote",
|
|
544
545
|
{
|
|
@@ -644,13 +645,13 @@ function TestimonialsMinimalNumbered({
|
|
|
644
645
|
String(testimonials.length).padStart(2, "0")
|
|
645
646
|
] })
|
|
646
647
|
] }) }),
|
|
647
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-
|
|
648
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
648
649
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
649
650
|
"button",
|
|
650
651
|
{
|
|
651
652
|
onClick: handlePrev,
|
|
652
653
|
className: "rounded-full p-2 transition-all duration-300 ",
|
|
653
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size:
|
|
654
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24 })
|
|
654
655
|
}
|
|
655
656
|
),
|
|
656
657
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -658,7 +659,7 @@ function TestimonialsMinimalNumbered({
|
|
|
658
659
|
{
|
|
659
660
|
onClick: handleNext,
|
|
660
661
|
className: "rounded-full p-2 transition-all duration-300 ",
|
|
661
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size:
|
|
662
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
|
|
662
663
|
}
|
|
663
664
|
)
|
|
664
665
|
] })
|