66 lines
2 KiB
TypeScript
66 lines
2 KiB
TypeScript
'use client';
|
|
|
|
import type { Prompt } from '@/lib/types';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Copy } from 'lucide-react';
|
|
import { useToast } from '@/hooks/use-toast';
|
|
import { formatDistanceToNow } from 'date-fns';
|
|
|
|
interface PromptCardProps {
|
|
prompt: Prompt;
|
|
}
|
|
|
|
export function PromptCard({ prompt }: PromptCardProps) {
|
|
const { toast } = useToast();
|
|
|
|
const handleCopy = () => {
|
|
navigator.clipboard.writeText(prompt.content);
|
|
toast({
|
|
title: 'Prompt Copied!',
|
|
description: 'The prompt text is now on your clipboard.',
|
|
});
|
|
};
|
|
|
|
const timeAgo = formatDistanceToNow(new Date(prompt.createdAt), { addSuffix: true });
|
|
|
|
return (
|
|
<Card className="flex flex-col bg-white/5 backdrop-blur-lg border border-white/10 shadow-lg hover:border-white/20 transition-all duration-300 h-full">
|
|
<CardHeader>
|
|
<CardTitle className="text-base font-semibold">{prompt.title}</CardTitle>
|
|
<CardDescription className="text-xs text-muted-foreground">{timeAgo}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex-grow">
|
|
<p className="text-sm text-foreground/80 line-clamp-4">
|
|
{prompt.content}
|
|
</p>
|
|
</CardContent>
|
|
<CardFooter className="flex flex-col items-start gap-4">
|
|
<div className="flex flex-wrap gap-2">
|
|
{prompt.tags.map((tag) => (
|
|
<Badge key={tag} variant="secondary" className="bg-primary/20 text-primary-foreground/80 border-none">
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
<Button
|
|
onClick={handleCopy}
|
|
variant="ghost"
|
|
size="sm"
|
|
className="w-full justify-center group"
|
|
>
|
|
<Copy className="h-4 w-4 mr-2 group-hover:text-accent transition-colors" />
|
|
Copy Prompt
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|