https://www.pourify.com/assets/AddSectionDialog-Bm_TQKF2.js

1const n=`import { useState } from "react";
2import { supabase } from "@/integrations/supabase/client";
3import { Button } from "@/components/ui/button";
4import { Input } from "@/components/ui/input";
5import { X } from "lucide-react";
6
7const iconOptions = [
8  "Layers", "Palette", "Type", "Image", "BookOpen", "Bot",
9  "Monitor", "PenTool", "Mail", "UserPlus", "LayoutGrid",
10  "Sparkles", "File", "ExternalLink",
11];
12
13const groupOptions = ["Assets", "Tools", "Resources"];
14
15interface Props {
16  onClose: () => void;
17  onSaved: () => void;
18}
19
20const AddSectionDialog = ({ onClose, onSaved }: Props) => {
21  const [label, setLabel] = useState("");
22  const [group, setGroup] = useState("Assets");
23  const [icon, setIcon] = useState("File");
24  const [externalUrl, setExternalUrl] = useState("");
25  const [saving, setSaving] = useState(false);
26
27  const handleSave = async () => {
28    if (!label.trim()) return;
29    setSaving(true);
30
31    await supabase.from("brand_hub_sections").insert({
32      label: label.trim(),
33      group_name: group,
34      icon,
35      external_url: externalUrl.trim() || null,
36      sort_order: 99,
37      content_type: "custom",
38    } as any);
39
40    setSaving(false);
41    onSaved();
42  };
43
44  return (
45    <div className="fixed inset-0 z-50 bg-black/60 flex items-center justify-center p-4" onClick={onClose}>
46      <div
47        className="bg-background border border-border rounded-2xl p-6 w-full max-w-md 

47shadow-lg"
48        onClick={(e) => e.stopPropagation()}
49      >
50        <div className="flex items-center justify-between mb-6">
51          <h3 className="text-foreground font-medium">Add Section</h3>
52          <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
53            <X className="h-4 w-4" />
54          </button>
55        </div>
56
57        <div className="space-y-4">
58          <div>
59            <label className="text-muted-foreground text-xs mb-1.5 block">Label</label>
60            <Input
61              value={label}
62              onChange={(e) => setLabel(e.target.value)}
63              placeholder="Section name"
64              className="rounded-xl"
65            />
66          </div>
67
68          <div>
69            <label className="text-muted-foreground text-xs mb-1.5 block">Group</label>
70            <div className="flex gap-2">
71              {groupOptions.map((g) => (
72                <button
73                  key={g}
74                  onClick={() => setGroup(g)}
75                  className={\`px-3 py-1.5 rounded-full text-xs font-medium transition-colors \${
76                    group === g ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
77                  }\`}
78                >
79                  {g}
80                </button>
81              ))}
82            </div>
83          </div>
84
85          <div>
86            <label className="text-muted-foreground text-xs mb-1.5 block">Icon</label>
87            <div className="flex gap-1.5 flex-wrap">
88              {iconOptions.map((i) => (
89                <button
90                  key={i}
91                  onClick={() => setIcon(i)}
92                  className={\`px-2.5 py-1 rounded-lg text-[11px] transition-colors \${
93                    icon === i ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
94                  }\`}
95                >
96                  {i}
97                </button>
98              ))}
99            </div>
100          </div>
101
102          <div>
103            <label className="text-muted-foreground text-xs mb-1.5 block">External URL (optional)</label>
104            <Input
105              value={externalUrl}
106              onChange={(e) => setExternalUrl(e.target.value)}
107              placeholder="https://..."
108              className="rounded-xl"
109            />
110          </div>
111        </div>
112
113        <div className="flex justify-end gap-2 mt-6">
114          <Button variant="ghost" onClick={onClose}>
115            Cancel
116          </Button>
117          <Button
118            onClick={handleSave}
119            disabled={!label.trim() || saving}
120            className="rounded-xl"
121          >
122            {saving ? "Adding…" : "Add section"}
123          </Button>
124        </div>
125      </div>
126    </div>
127  );
128};
129
130export default AddSectionDialog;
131`;export{n as default};