Function ExampleCard

website/src/components/CookbookSection.tsx:157–248

({
    example,
    isOpen,
    onToggle,
  }: {
    example: any;
    isOpen: boolean;
    onToggle: () => void;
  })

  ];

  const ExampleCard = ({
    example,
    isOpen,
    onToggle,
  }: {
    example: any;
    isOpen: boolean;
    onToggle: () => void;
  }) => {
    const [copied, setCopied] = useState(false);

    const handleCopy = (e: React.MouseEvent, text: string) => {
      e.stopPropagation(); // prevent collapsing when copying
      navigator.clipboard.writeText(text);
      setCopied(true);
      toast({
        title: "Copied to clipboard!",
        description: "The code snippet has been copied to your clipboard.",
      });
      setTimeout(() => setCopied(false), 2000);
    };

    return (
      <div>
        <Collapsible open={isOpen} onOpenChange={onToggle}>
          <CollapsibleTrigger asChild>
            <div className="cursor-pointer">
              <GlassCard hoverable={true} className={`transition-all duration-300 ${isOpen ? 'rounded-b-none border-b-0' : ''}`}>
                <div className="p-6">
                  <div className="flex flex-col-reverse gap-5 md:gap-0 md:flex-row items-center md:items-start justify-between">
                    <div className="text-center md:text-left">
                      <h4 className="text-[11px] font-black uppercase tracking-widest text-white">
                        {example.title}
                      </h4>
                      <p className="text-[10px] font-mono uppercase tracking-widest text-gray-500 mt-1">
                        {example.description}
                      </p>
                    </div>
                    <div className="flex items-center gap-2 self-start sm:self-auto">
                      <div className="flex items-center gap-1 bg-white/10 text-white border border-white/10 px-3 py-1.5 rounded-lg text-xs font-mono shadow-sm">
                        <span>{example.tool}</span>
                        <ChevronDown
                          className={`h-3.5 w-3.5 transition-transform ${isOpen ? "rotate-180" : ""
                            }`}
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </GlassCard>
            </div>
          </CollapsibleTrigger>

          <CollapsibleContent>
            <GlassCard hoverable={false} className="rounded-t-none border-t-0 bg-black/20">
              <div className="p-6 pt-2">
                <div className="space-y-3">
                  <div className="flex items-center justify-between flex-wrap gap-2 mb-2">