57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
|
import Image from "next/image";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardContent,
|
||
|
|
CardDescription,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
} from "@/components/ui/card";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { HiOutlineCheckBadge } from "react-icons/hi2";
|
||
|
|
|
||
|
|
type SubscriptionCardProps = {
|
||
|
|
id: string;
|
||
|
|
title: string;
|
||
|
|
picture: string;
|
||
|
|
description: string;
|
||
|
|
tags: string[];
|
||
|
|
};
|
||
|
|
export default function SubscriptionCard({
|
||
|
|
picture,
|
||
|
|
title,
|
||
|
|
tags,
|
||
|
|
description,
|
||
|
|
}: SubscriptionCardProps) {
|
||
|
|
return (
|
||
|
|
<Card className="group sm:flex">
|
||
|
|
<div className="overflow-hidden max-sm:h-[100px] max-sm:rounded-t-md sm:w-[250px] sm:rounded-l-md">
|
||
|
|
<Image
|
||
|
|
width={250}
|
||
|
|
height={150}
|
||
|
|
src={picture}
|
||
|
|
alt={title}
|
||
|
|
unoptimized
|
||
|
|
className={cn(
|
||
|
|
"w-auto object-cover object-center transition-all group-hover:scale-105 sm:h-full",
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="">
|
||
|
|
<CardHeader className="">
|
||
|
|
<CardTitle className="line-clamp-2">{title}</CardTitle>
|
||
|
|
<CardDescription className="line-clamp-3">
|
||
|
|
{description}
|
||
|
|
</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="items-strech flex w-full flex-col items-center gap-2 sm:max-w-md sm:flex-row sm:gap-4">
|
||
|
|
<Button className="w-full">Buy now</Button>
|
||
|
|
<Button variant={"secondary"} className="w-full">
|
||
|
|
Details
|
||
|
|
</Button>
|
||
|
|
</CardContent>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|