90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
|
import { formatDate, fromUnix } from "@/lib/utils/dates";
|
||
|
|
import { BANNER } from "@/constants";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import Image from "next/image";
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardContent,
|
||
|
|
CardDescription,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
} from "@/components/ui/card";
|
||
|
|
import SmallProfileLine from "@/components/ProfileContainers/SmallProfileLine";
|
||
|
|
import AvatarStack from "@/components/ProfileContainers/AvatarStack";
|
||
|
|
import { NDKEvent } from "@nostr-dev-kit/ndk";
|
||
|
|
import { getTagValues, getTagAllValues } from "@/lib/nostr/utils";
|
||
|
|
import { HiOutlineMapPin, HiOutlineUserCircle } from "react-icons/hi2";
|
||
|
|
|
||
|
|
type LargeFeedCardProps = {
|
||
|
|
event: NDKEvent;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function LargeFeedCard({ event }: LargeFeedCardProps) {
|
||
|
|
const { tags, pubkey, content } = event;
|
||
|
|
const image = getTagValues("image", tags);
|
||
|
|
const users = getTagAllValues("p", tags);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card className="relative flex justify-between gap-x-4 rounded-[1rem] bg-muted p-[0.5rem]">
|
||
|
|
<CardHeader className="w-3/5 justify-between p-0 pr-5">
|
||
|
|
<div className="">
|
||
|
|
<div className="flex">
|
||
|
|
<SmallProfileLine pubkey={pubkey} />
|
||
|
|
</div>
|
||
|
|
<div className="pl-3">
|
||
|
|
<CardTitle className="mt-3 line-clamp-2 text-xl leading-6">
|
||
|
|
{getTagValues("name", tags)}
|
||
|
|
</CardTitle>
|
||
|
|
<CardDescription className="mt-2 line-clamp-4 text-[13px] leading-5">
|
||
|
|
{content}
|
||
|
|
</CardDescription>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-x-4 pl-2">
|
||
|
|
{!!users.length && (
|
||
|
|
<div className="flex shrink-0 items-center gap-x-2">
|
||
|
|
<HiOutlineUserCircle className="h-5 w-5 text-primary" />
|
||
|
|
<AvatarStack
|
||
|
|
pubkeys={users.slice(0, 4)}
|
||
|
|
className="z-0 h-6 w-6 text-[9px]"
|
||
|
|
remaining={users.length - 4 > 2 ? users.length - 4 : 0}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className="flex items-center gap-x-2">
|
||
|
|
<HiOutlineMapPin className="h-5 w-5 shrink-0 text-primary" />
|
||
|
|
<p className="line-clamp-1 text-xs text-muted-foreground">
|
||
|
|
124 Main street, first ave, NY NY, 118034. Across the street from
|
||
|
|
too long
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex w-full flex-col justify-end self-start pl-2 pt-2">
|
||
|
|
<div className="flex w-3/4 items-center justify-stretch gap-3">
|
||
|
|
<Button className="flex-1">RSVP</Button>
|
||
|
|
<Button variant={"outline"} className="flex-1">
|
||
|
|
Share
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardHeader>
|
||
|
|
<div className="absolute inset-y-[0.5rem] right-[0.5rem] w-2/5">
|
||
|
|
{image ? (
|
||
|
|
<Image
|
||
|
|
src={image}
|
||
|
|
unoptimized
|
||
|
|
alt="Image"
|
||
|
|
fill
|
||
|
|
className={cn(
|
||
|
|
"h-full max-h-[150px] rounded-[0.5rem] object-cover object-center max-sm:max-h-[100px]",
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<div className=""></div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|