101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
import Typography, {
|
|
TypographyProps,
|
|
} from "@/components/ui/Typography/Typography";
|
|
import Stars from "@/components/widgets/Stars/Stars";
|
|
import { cn } from "@/lib/utils";
|
|
import Image from "next/image";
|
|
import { Card } from "..";
|
|
import { ArrowRight } from "lucide-react";
|
|
import Avatar from "@/components/ui/Avatar/Avatar";
|
|
|
|
interface ReviewProps extends React.ComponentProps<typeof Card> {
|
|
avatar?: React.ComponentProps<typeof Avatar>;
|
|
name?: TypographyProps<"span">;
|
|
stars?: React.ComponentProps<typeof Stars>;
|
|
date?: TypographyProps<"span">;
|
|
text?: TypographyProps<"p">;
|
|
portrait?: React.ComponentProps<typeof Image>;
|
|
photo?: React.ComponentProps<typeof Image>;
|
|
}
|
|
|
|
export default function Review({
|
|
stars,
|
|
avatar,
|
|
name,
|
|
date,
|
|
text,
|
|
portrait,
|
|
photo,
|
|
...props
|
|
}: ReviewProps) {
|
|
return (
|
|
<Card {...props}>
|
|
<div className={cn("w-full flex items-center gap-3")}>
|
|
{avatar && (
|
|
<Avatar {...avatar} className={cn("size-10", avatar.className)} />
|
|
)}
|
|
<div className={cn("flex flex-col gap-0.5")}>
|
|
{name && (
|
|
<Typography
|
|
font="inter"
|
|
weight="semiBold"
|
|
size="sm"
|
|
{...name}
|
|
className={cn(
|
|
"text-trial-payment-foreground leading-[20px]",
|
|
name.className
|
|
)}
|
|
/>
|
|
)}
|
|
<div className={cn("flex items-center gap-2")}>
|
|
{stars && <Stars {...stars} />}
|
|
{date && (
|
|
<Typography
|
|
font="inter"
|
|
size="xs"
|
|
{...date}
|
|
className={cn("text-[#6B7280] leading-4", date.className)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{text && (
|
|
<Typography
|
|
font="inter"
|
|
size="sm"
|
|
{...text}
|
|
className={cn("text-trial-payment-foreground mt-3.5", text.className)}
|
|
/>
|
|
)}
|
|
<div className={cn("w-full flex items-center gap-[9px] mt-5")}>
|
|
{portrait && (
|
|
<Image
|
|
width={64}
|
|
height={64}
|
|
{...portrait}
|
|
alt={portrait.alt || "Portrait"}
|
|
className={cn(
|
|
"size-16 rounded-[8px] object-cover border-2 border-border-white shadow-trial-payment-review-photo",
|
|
portrait.className
|
|
)}
|
|
/>
|
|
)}
|
|
<ArrowRight color={"var(--color-primary)"} />
|
|
{photo && (
|
|
<Image
|
|
width={64}
|
|
height={64}
|
|
{...photo}
|
|
alt={photo.alt || "Photo"}
|
|
className={cn(
|
|
"size-16 rounded-[8px] object-cover border-2 border-border-white shadow-trial-payment-review-photo",
|
|
photo.className
|
|
)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|