Spinning testimonials

1import { cn } from "@/lib/utils";
2import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
3 
4const TestimonialCard = ({
5  className,
6  ...rest
7}: React.ComponentProps<"div">) => (
8  <div
9    className={cn(
10      "bg-card text-card-foreground border-border/50 flex flex-col justify-between gap-10 rounded-4xl border px-5 py-4 shadow-md lg:px-7 lg:py-6",
11      className
12    )}
13    {...rest}
14  />
15);
16 
17const TestimonialContent = ({
18  className,
19  ...rest
20}: React.ComponentProps<"div">) => (
21  <div className={cn("text-lg font-medium lg:text-2xl", className)} {...rest} />
22);
23 
24const TestimonialAuthor = ({
25  className,
26  ...rest
27}: React.ComponentProps<"div">) => (
28  <div
29    className={cn(
30      "grid grid-cols-[auto_1fr] grid-rows-[auto_auto] gap-x-3 lg:gap-x-4",
31      className
32    )}
33    {...rest}
34  />
35);
36 
37const TestimonialAvatar = ({
38  className,
39  ...rest
40}: React.ComponentProps<typeof Avatar>) => (
41  <Avatar
42    className={cn("col-start-1 row-span-2 row-start-1 my-auto", className)}
43    {...rest}
44  />
45);
46 
47const TestimonialAvatarImage = (
48  props: React.ComponentProps<typeof AvatarImage>
49) => <AvatarImage {...props} />;
50 
51const TestimonialAvatarFallback = (
52  props: React.ComponentProps<typeof AvatarFallback>
53) => <AvatarFallback {...props} />;
54 
55const TestimonialName = ({
56  className,
57  ...rest
58}: React.ComponentProps<"div">) => (
59  <div
60    className={cn(
61      "col-start-2 row-start-1 text-sm font-medium lg:text-base",
62      className
63    )}
64    {...rest}
65  />
66);
67 
68const TestimonialPosition = ({
69  className,
70  ...rest
71}: React.ComponentProps<"div">) => (
72  <div
73    className={cn(
74      "text-muted-foreground col-start-2 row-start-2 text-xs lg:text-sm",
75      className
76    )}
77    {...rest}
78  />
79);
80 
81export {
82  TestimonialCard,
83  TestimonialContent,
84  TestimonialAuthor,
85  TestimonialAvatar,
86  TestimonialName,
87  TestimonialPosition,
88  TestimonialAvatarFallback,
89  TestimonialAvatarImage,
90};