51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:Tc3b,'use client'; import { cn } from '@/lib/utils'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/systaliko-ui/shadcn/avatar'; import { RatingStars } from '@/components/systaliko-ui/components/rating-stars'; import * as React from 'react'; import { Card, cardVariants } from '@/components/systaliko-ui/cards/card'; import { VariantProps } from 'class-variance-authority'; interface AuthorProps extends React.HTMLAttributes { authorName: string; avatarUrl?: string; description?: string; } interface CardTestimonialProps extends React.HTMLAttributes, VariantProps { testimonialQuote: string; testimonialAuthor: AuthorProps; testimonialRating?: number; } interface TestimonialContextValue { testimonialQuote: string; testimonialAuthor: AuthorProps; testimonialRating?: number; } const CardTestimonialContext = React.createContext< TestimonialContextValue | undefined >(undefined); function useCardTestimonialContext() { const context = React.useContext(CardTestimonialContext); if (context === undefined) { throw new Error( 'useCardTestimonialContext must be used within a CardTestimonialProvider', ); } return context; } export const CardTestimonial = ({ testimonialQuote, testimonialAuthor, testimonialRating, className, children, variant, ...props }: CardTestimonialProps) => { return ( {children} ); }; export const TestimonialAuthor = ({ className, children, ...props }: React.HTMLAttributes) => { const { testimonialAuthor } = useCardTestimonialContext(); const { authorName, avatarUrl, description } = testimonialAuthor; return (

{authorName .split(' ') .map((n) => n[0]) .join('')}

{authorName}

{description}

{children}

); }; export const TestimonialRating = ({ className, ...props }: React.HTMLAttributes) => { const { testimonialRating } = useCardTestimonialContext(); return ( ); }; export const TestimonialQuote = ({ className, ...props }: React.HTMLAttributes) => { const { testimonialQuote } = useCardTestimonialContext(); return (

{testimonialQuote}

); }; 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L51",null,{"registryDependencies":["https://systaliko-ui.vercel.app/r/default-avatar","https://systaliko-ui.vercel.app/r/default-rating-stars","https://systaliko-ui.vercel.app/r/default-card"]}]]}],["$","$L52",null,{"sourceUrl":"https://systaliko-ui.vercel.app/r/card-testimonial.json","proxyUrl":"https://shadcnregistry.com/r/systaliko-ui/card-testimonial","itemId":"@systaliko-ui/card-testimonial"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/cards/card-testimonial/index.tsx","content":"$54","type":"registry:ui","target":"components/systaliko-ui/cards/card-testimonial.tsx"}]}]]}],"$L55"]}]

Card Testimonial

Installation

Files

components

Styles