import { forwardRef } from "react";
import {
Star,
Quote,
User,
Award,
CheckCircle,
MessageSquare,
Users,
ThumbsUp,
Shield,
Verified
} from "lucide-react";
import {
Stack,
Group,
Title,
Text,
Badge,
Button,
Image,
Icon,
Box,
Card
} from "@ui8kit/core";
import { skyOSTheme } from "@ui8kit/theme";
const currentTheme = skyOSTheme;
const theme = {
theme: currentTheme,
themeRounded: currentTheme.rounded,
themeButtonSize: currentTheme.buttonSize
}
import {
LayoutBlock,
createLayoutContentHook
} from "@ui8kit/core";
// Reuse testimonial interfaces from SplitTestimonial
interface TestimonialItem {
id: string;
rating: number;
quote: string;
author: string;
position: string;
description: string;
company?: string;
avatar?: {
src: string;
alt: string;
};
verified?: boolean;
}
export interface GridTestimonialData {
title: string;
subtitle?: string;
description?: string;
badge?: string;
testimonials: TestimonialItem[];
stats?: {
totalReviews?: string;
averageRating?: string;
satisfied?: string;
};
}
interface GridTestimonialProps {
content: GridTestimonialData;
variant?: "grid" | "masonry" | "minimal" | "cards" | "compact" | "slider" | "magazine";
useContainer?: boolean;
py?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
className?: string;
}
// Render stars component (reused from SplitTestimonial)
const RenderStars = ({ rating, size = "sm" }: { rating: number; size?: "xs" | "sm" | "md" }) => (
{[...Array(5)].map((_, index) => (
))}
);
// Custom content hooks for different grid testimonial variants
const gridTestimonialContentHooks = {
// 1. Classic Grid Layout
grid: createLayoutContentHook({
header: (content: GridTestimonialData) => (
{content.badge && (
{content.badge}
)}
{content.title}
{content.description && (
{content.description}
)}
{content.stats && (
{content.stats.averageRating && (
{content.stats.averageRating} out of 5
)}
{content.stats.totalReviews && (
Based on {content.stats.totalReviews} reviews
)}
)}
),
item: (testimonial: TestimonialItem) => (
"{testimonial.quote}"
{testimonial.avatar ? (
) : (
)}
{testimonial.author}
{testimonial.verified && (
)}
{testimonial.position}
{testimonial.company && ` at ${testimonial.company}`}
)
}),
// 2. Masonry Layout with Varying Heights
masonry: createLayoutContentHook({
header: (content: GridTestimonialData) => (
{content.title}
{content.subtitle && (
{content.subtitle}
)}
),
item: (testimonial: TestimonialItem, index: number) => {
const isLarge = index % 4 === 0;
return (
{testimonial.verified && (
Verified
)}
"{testimonial.quote}"
{testimonial.avatar ? (
) : (
)}
{testimonial.author}
{testimonial.position}
);
}
}),
// 3. Minimal Clean Layout
minimal: createLayoutContentHook({
header: (content: GridTestimonialData) => (
{content.badge || "Testimonials"}
{content.title}
{content.subtitle && (
{content.subtitle}
)}
),
item: (testimonial: TestimonialItem) => (
"{testimonial.quote}"
— {testimonial.author}
{testimonial.position}
)
}),
// 4. Detailed Cards with Avatars
cards: createLayoutContentHook({
header: (content: GridTestimonialData) => (
{content.badge || "Customer Reviews"}
{content.title}
{content.stats && (
{content.stats.totalReviews && (
{content.stats.totalReviews}
Happy Customers
)}
{content.stats.averageRating && (
{content.stats.averageRating}
Average Rating
)}
)}
),
item: (testimonial: TestimonialItem) => (
{/* Header with rating and quote icon */}
{/* Quote */}
"{testimonial.quote}"
{/* Author section */}
{testimonial.avatar ? (
) : (
)}
{testimonial.author}
{testimonial.verified && (
Verified
)}
{testimonial.position}
{testimonial.company && ` at ${testimonial.company}`}
)
}),
// 5. Compact Layout
compact: createLayoutContentHook({
header: (content: GridTestimonialData) => (
{content.title}
{content.description && (
{content.description}
)}
),
item: (testimonial: TestimonialItem) => (
"{testimonial.quote}"
{testimonial.author}
•
{testimonial.position}
)
}),
// 6. Slider Style (Single Row)
slider: createLayoutContentHook({
header: (content: GridTestimonialData) => (
{content.title}
{content.description && (
{content.description}
)}
),
item: (testimonial: TestimonialItem) => (
"{testimonial.quote}"
{testimonial.avatar ? (
) : (
)}
{testimonial.author}
{testimonial.position}
)
}),
// 7. Magazine Style with Featured Testimonials
magazine: createLayoutContentHook({
header: (content: GridTestimonialData) => (
{content.badge || "Featured Reviews"}
{content.title}
{content.subtitle && (
{content.subtitle}
)}
{content.stats && (
{content.stats.totalReviews && (
{content.stats.totalReviews}
Reviews
)}
{content.stats.averageRating && (
{content.stats.averageRating}
Average
)}
{content.stats.satisfied && (
{content.stats.satisfied}
Satisfied
)}
)}
),
item: (testimonial: TestimonialItem, index: number) => {
const isFeatured = index % 5 === 0;
return (
{isFeatured && (
Featured
)}
"{testimonial.quote}"
{testimonial.avatar ? (
) : (
)}
{testimonial.author}
{testimonial.position}
{testimonial.company && ` at ${testimonial.company}`}
);
}
})
};
export const GridTestimonial = forwardRef(
({
content,
variant = "grid",
useContainer = true,
py = "lg",
className,
...props
}, ref) => {
// Choose content hooks based on variant
const contentHooks = gridTestimonialContentHooks[variant] || gridTestimonialContentHooks.grid;
// Determine layout type and grid configuration based on variant
const getLayoutConfig = () => {
switch (variant) {
case "masonry":
return { layout: "grid" as const, cols: "1-2-3" };
case "minimal":
return { layout: "grid" as const, cols: "1-2" };
case "cards":
return { layout: "grid" as const, cols: "1-2-3" };
case "compact":
return { layout: "grid" as const, cols: "1-2-3-4" };
case "slider":
return { layout: "flex" as const, wrap: "nowrap" };
case "magazine":
return { layout: "grid" as const, cols: "1-2-3" };
default: // grid
return { layout: "grid" as const, cols: "1-2-3" };
}
};
const layoutConfig = getLayoutConfig();
return (
);
}
);
GridTestimonial.displayName = "GridTestimonial";
// Export template configurations
export const gridTestimonialTemplates = {
grid: {
id: "gridTestimonialGrid",
name: "Classic Grid Testimonials",
description: "Traditional grid layout with testimonial cards",
component: GridTestimonial,
defaultProps: { variant: "grid" as const }
},
masonry: {
id: "gridTestimonialMasonry",
name: "Masonry Testimonials",
description: "Pinterest-style masonry layout with varying heights",
component: GridTestimonial,
defaultProps: { variant: "masonry" as const }
},
minimal: {
id: "gridTestimonialMinimal",
name: "Minimal Testimonials",
description: "Clean, minimal design with subtle styling",
component: GridTestimonial,
defaultProps: { variant: "minimal" as const }
},
cards: {
id: "gridTestimonialCards",
name: "Detailed Card Testimonials",
description: "Rich card layout with avatars and detailed information",
component: GridTestimonial,
defaultProps: { variant: "cards" as const }
},
compact: {
id: "gridTestimonialCompact",
name: "Compact Testimonials",
description: "Space-efficient compact testimonial layout",
component: GridTestimonial,
defaultProps: { variant: "compact" as const }
},
slider: {
id: "gridTestimonialSlider",
name: "Slider Testimonials",
description: "Horizontal slider-style testimonial layout",
component: GridTestimonial,
defaultProps: { variant: "slider" as const }
},
magazine: {
id: "gridTestimonialMagazine",
name: "Magazine Testimonials",
description: "Editorial magazine-style layout with featured testimonials",
component: GridTestimonial,
defaultProps: { variant: "magazine" as const }
}
};