"use client"; import { useState, useRef } from "react"; import { useTranslations } from "next-intl"; import { ChevronDown, ChevronUp, Lightbulb, Code, Variable, User, Target, BookOpen, Copy, Check, } from "lucide-react"; interface CodeBlockProps { code: string; } function CodeBlock({ code }: CodeBlockProps) { const [copied, setCopied] = useState(false); const handleCopy = async () => { await navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 2000); }; return (

        {code}

); } interface SectionProps { icon: React.ReactNode; title: string; children: React.ReactNode; defaultOpen?: boolean; } function Section({ icon, title, children, defaultOpen = false }: SectionProps) { const [isOpen, setIsOpen] = useState(defaultOpen); const sectionRef = useRef(null); const handleToggle = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); const willOpen = !isOpen; setIsOpen(willOpen); if (willOpen) { setTimeout(() => { sectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }); }, 50); } }; return (

{isOpen &&

{children}

}

); } export function PromptWritingGuide() { const t = useTranslations("promptWritingGuide"); const [isExpanded, setIsExpanded] = useState(false); return (

{isExpanded && (

{/* General Tips */}

} title={t("generalTips.title")} defaultOpen={true} >

1.
{t("generalTips.beSpecific.title")}
{t("generalTips.beSpecific.description")}
2.
{t("generalTips.provideContext.title")}
{t("generalTips.provideContext.description")}
3.
{t("generalTips.defineFormat.title")}
{t("generalTips.defineFormat.description")}
4.
{t("generalTips.setConstraints.title")}
{t("generalTips.setConstraints.description")}
5.
{t("generalTips.includeExamples.title")}
{t("generalTips.includeExamples.description")}

{/* Role-Playing / Act As */}

} title={t("rolePlaying.title")} >

{t("rolePlaying.description")}

{t("rolePlaying.basicPattern")}

{t("rolePlaying.exampleExpert")}

{t("rolePlaying.exampleCreative")}

{t("rolePlaying.popularRoles")}

Technical Roles

• Senior Developer
• DevOps Engineer
• Data Scientist
• Security Expert

Creative Roles

• Copywriter
• Story Editor
• Marketing Strategist
• UX Designer

Educational Roles

• Tutor / Teacher
• Language Coach
• Career Advisor
• Research Assistant

Business Roles

• Business Analyst
• Project Manager
• HR Consultant
• Financial Advisor

{/* Variables */}

} title={t("variables.title")} >

{t("variables.description")}

{t("variables.syntax")}

{`\${variable_name}`} — {t("variables.requiredVar")}

{`\${variable_name:default value}`} — {t("variables.withDefault")}

{t("variables.simpleExample")}

{t("variables.advancedExample")}

{t("variables.bestPractices")}

• {t("variables.tip1")}
• {t("variables.tip2")}
• {t("variables.tip3")}
• {t("variables.tip4")}

{/* Structured Prompts - JSON/YAML */}

} title={t("structured.title")} >

{t("structured.description")}

{t("structured.whenToUse")}

• {t("structured.useCase1")}
• {t("structured.useCase2")}
• {t("structured.useCase3")}
• {t("structured.useCase4")}

{t("structured.jsonExample")}

{t("structured.yamlExample")}

{t("structured.agentWorkflow")}

{t("structured.tips")}

• {t("structured.tip1")}
• {t("structured.tip2")}
• {t("structured.tip3")}
• {t("structured.tip4")}

{/* Output Optimization */}

} title={t("outputOptimization.title")} >

{t("outputOptimization.description")}

{t("outputOptimization.formatInstructions")}

{t("outputOptimization.constraintExamples")}

{t("outputOptimization.lengthConstraints")}

{t("outputOptimization.lengthExample")}

{t("outputOptimization.styleConstraints")}

{t("outputOptimization.styleExample")}

{t("outputOptimization.contentConstraints")}

{t("outputOptimization.contentExample")}

)}

); }

{t("title")}