Leon Serfaty
87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { FileText, Hash, Mail, Loader2, Copy, Sparkles } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { repurposeAction } from "@/app/(app)/episodes/actions";
|
|
|
|
type Format = "blog" | "social_thread" | "newsletter";
|
|
type Content = { title: string; body: string } | null;
|
|
|
|
const FORMATS: { key: Format; label: string; icon: React.ComponentType<{ className?: string }> }[] = [
|
|
{ key: "blog", label: "Blog post", icon: FileText },
|
|
{ key: "social_thread", label: "Social thread", icon: Hash },
|
|
{ key: "newsletter", label: "Newsletter", icon: Mail },
|
|
];
|
|
|
|
export function RepurposeClient({
|
|
episodeId,
|
|
initial,
|
|
}: {
|
|
episodeId: string;
|
|
initial: Record<Format, Content>;
|
|
}) {
|
|
const [content, setContent] = useState<Record<Format, Content>>(initial);
|
|
const [busy, setBusy] = useState<Format | null>(null);
|
|
|
|
async function generate(format: Format) {
|
|
setBusy(format);
|
|
const res = await repurposeAction(episodeId, format);
|
|
setBusy(null);
|
|
if (!res.ok || !res.content) {
|
|
toast.error(res.error ?? "Could not generate");
|
|
return;
|
|
}
|
|
setContent((prev) => ({ ...prev, [format]: res.content! }));
|
|
toast.success("Generated");
|
|
}
|
|
|
|
function copy(text: string) {
|
|
navigator.clipboard.writeText(text).then(() => toast.success("Copied to clipboard"));
|
|
}
|
|
|
|
return (
|
|
<div className="grid gap-6 lg:grid-cols-3">
|
|
{FORMATS.map((f) => {
|
|
const c = content[f.key];
|
|
return (
|
|
<Card key={f.key} className="flex flex-col">
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<f.icon className="h-4 w-4 text-brand" /> {f.label}
|
|
</CardTitle>
|
|
<Button size="sm" variant="outline" onClick={() => generate(f.key)} disabled={busy === f.key}>
|
|
{busy === f.key ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Sparkles className="h-4 w-4" />
|
|
)}
|
|
{c ? "Regenerate" : "Generate"}
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="flex-1">
|
|
{c ? (
|
|
<div className="space-y-3">
|
|
<p className="font-medium">{c.title}</p>
|
|
<div className="max-h-96 overflow-y-auto whitespace-pre-wrap rounded-md bg-muted/40 p-3 text-sm text-muted-foreground">
|
|
{c.body}
|
|
</div>
|
|
<Button size="sm" variant="ghost" onClick={() => copy(`${c.title}\n\n${c.body}`)}>
|
|
<Copy className="h-4 w-4" /> Copy
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<p className="py-8 text-center text-sm text-muted-foreground">
|
|
Turn this episode into a {f.label.toLowerCase()}.
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|