84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
|
"use client";
|
||
|
|
import Image from "next/image";
|
||
|
|
import Link from "next/link";
|
||
|
|
import { RiMoreFill } from "react-icons/ri";
|
||
|
|
import { HiOutlineLightningBolt } from "react-icons/hi";
|
||
|
|
import {
|
||
|
|
HiOutlineHandThumbUp,
|
||
|
|
HiOutlineChatBubbleLeftEllipsis,
|
||
|
|
HiOutlineEllipsisHorizontal,
|
||
|
|
} from "react-icons/hi2";
|
||
|
|
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardContent,
|
||
|
|
CardDescription,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
} from "@/components/ui/card";
|
||
|
|
import { Avatar, AvatarImage, AvatarFallback } from "@radix-ui/react-avatar";
|
||
|
|
import { formatDate } from "@/lib/utils/dates";
|
||
|
|
import { Button } from "../ui/button";
|
||
|
|
|
||
|
|
type CreatorCardProps = {
|
||
|
|
displayName: string;
|
||
|
|
about: string;
|
||
|
|
picture: string;
|
||
|
|
banner: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function LongFormContentCard() {
|
||
|
|
return (
|
||
|
|
<Card className="relative max-w-[400px] overflow-hidden">
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-4">
|
||
|
|
<div className="center gap-x-3">
|
||
|
|
<Avatar className="center h-8 w-8 overflow-hidden rounded-sm bg-muted">
|
||
|
|
<AvatarImage
|
||
|
|
src={
|
||
|
|
"https://images.unsplash.com/photo-1566492031773-4f4e44671857?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60"
|
||
|
|
}
|
||
|
|
alt="user"
|
||
|
|
/>
|
||
|
|
<AvatarFallback className="text-xs">SC</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
<span className="text-xs uppercase text-muted-foreground">
|
||
|
|
Derek Seivers
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="-mr-1 flex items-center gap-x-1.5 text-xs text-muted-foreground">
|
||
|
|
{formatDate(new Date("10-5-23"), "MMM Do")}
|
||
|
|
<Button size={"sm"} variant={"ghost"} className="center h-6 w-6 p-0">
|
||
|
|
<RiMoreFill className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="px-4 pb-3">
|
||
|
|
<CardTitle className="mb-1.5 line-clamp-2 text-lg font-semibold">
|
||
|
|
The start of the Nostr revolution
|
||
|
|
</CardTitle>
|
||
|
|
<CardDescription className="line-clamp-4 text-sm">
|
||
|
|
This is the summary of this artilce. Let's hope that it is a good
|
||
|
|
article and that it will end up being worth reading. I don't want to
|
||
|
|
waste my time on some random other stuff.
|
||
|
|
</CardDescription>
|
||
|
|
<div className="mt-3 flex items-center justify-between">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Button size={"sm"} variant={"ghost"} className="gap-x-1.5 px-2">
|
||
|
|
<HiOutlineHandThumbUp className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
<Button size={"sm"} variant={"ghost"} className="gap-x-1.5 px-2">
|
||
|
|
<HiOutlineChatBubbleLeftEllipsis className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<Button size={"sm"} className="gap-x-1.5">
|
||
|
|
<HiOutlineLightningBolt className="h-4 w-4" />
|
||
|
|
<span>zap</span>
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|