File size: 1,827 Bytes
1067b6f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | "use client";
import { useState, type PropsWithChildren } from "react";
import { Heading } from "../ui/heading";
import Image from "next/image";
import { Button } from "../ui/button";
import { cn } from "@/lib/utils";
import { anchorTags } from "@/lib/routes";
import { LoadingSkeleton } from "../ui/loading-skeleton";
const mockImage =
"https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80";
export const CollectionHeaderWrapper = (
props: PropsWithChildren<{ heading: string }>
) => {
const [showMore, setShowMore] = useState(false);
return (
<div
className="border-border rounded-md border overflow-hidden"
id={anchorTags.collectionHeader}
>
<div className="relative w-full h-36">
<Image
src={mockImage}
alt="mock image"
fill
className="object-cover w-full h-36"
/>
</div>
<div className="p-6">
<Heading size="h2">{props.heading}</Heading>
<div
className={cn(
"text-muted-foreground flex flex-col gap-4 mt-2 relative",
!showMore && "max-h-[100px] overflow-hidden"
)}
>
{!showMore && (
<div
className={cn(
"p-2 h-[70px] absolute bottom-0 w-full",
!showMore &&
"bg-gradient-to-b from-transparent to-translucentWhite"
)}
/>
)}
{props.children}
</div>
<Button
variant="secondary"
onClick={() => setShowMore((prev) => !prev)}
className={cn(showMore && "mt-4")}
>
{!showMore ? "Show more" : "Show less"}
</Button>
</div>
</div>
);
};
|