Arnaud
1677e40668
Added a shared ExportMarkdownButton (copy to clipboard / download .md) next to every existing print button: recipe, shopping list, collection, meal plan, pantry. Each surface gets a small serializer in lib/markdown/ built from data already in scope at that page — no new queries except pantry, where items now thread through as a prop to PantryPageHeader instead of being fetched only for PantryManager. Also fixes an unrelated bug hit while verifying the collection export: RecipeCard called the client-only useTranslations() hook without "use client", so it rendered fine everywhere it happened to run inside an already-client tree but 500'd — "Couldn't find next-intl config file" — when Next tried to run it as a Server Component, which only happens on the collection detail page (its only caller). Collections with recipes in them were completely broken. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { Copy, Download, FileDown } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { useTranslations } from "next-intl";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
|
|
export function ExportMarkdownButton({
|
|
markdown,
|
|
filename,
|
|
}: {
|
|
markdown: string;
|
|
filename: string;
|
|
}) {
|
|
const t = useTranslations("common");
|
|
|
|
async function handleCopy() {
|
|
try {
|
|
await navigator.clipboard.writeText(markdown);
|
|
toast.success(t("copiedToClipboard"));
|
|
} catch {
|
|
toast.error(t("copyFailed"));
|
|
}
|
|
}
|
|
|
|
function handleDownload() {
|
|
const blob = new Blob([markdown], { type: "text/markdown;charset=utf-8" });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = filename.endsWith(".md") ? filename : `${filename}.md`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.remove();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger render={
|
|
<Button variant="ghost" size="icon" title={t("exportMarkdown")}>
|
|
<FileDown className="h-4 w-4" />
|
|
</Button>
|
|
} />
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={() => { void handleCopy(); }}>
|
|
<Copy className="h-4 w-4" />
|
|
{t("copyMarkdown")}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={handleDownload}>
|
|
<Download className="h-4 w-4" />
|
|
{t("downloadMarkdown")}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|