532 lines
30 KiB
JavaScript
532 lines
30 KiB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
|
|
import { B as Button } from "./button-CdJZJLGw.js";
|
|
import { C as Card, b as CardContent, a as CardHeader, c as CardTitle, d as CardDescription } from "./card-B-gBwpxd.js";
|
|
import { S as Separator } from "./separator-CSqU-rrB.js";
|
|
import { D as DataSortModal } from "./data-sort-modal-DUjsJmGW.js";
|
|
import { D as DeleteModal } from "./delete-modal-BrX_mlY2.js";
|
|
import { S as Switch } from "./switch-ad-BDGs-.js";
|
|
import { T as Tabs } from "./tabs-DgXFE6Gu.js";
|
|
import { D as Dialog, b as DialogContent, c as DialogHeader, d as DialogTitle, g as DialogDescription, e as DialogFooter } from "./dialog-DGP_3dPQ.js";
|
|
import { I as Input } from "./input-BsvJqbcd.js";
|
|
import { L as Label } from "./label-0rIIfpX0.js";
|
|
import { S as Select, a as SelectTrigger, b as SelectValue, c as SelectContent, d as SelectItem } from "./select-BYx0MCUK.js";
|
|
import { T as TabsList, a as TabsTrigger, b as TabsContent } from "./tabs-DmCK9qzK.js";
|
|
import { useForm, router, usePage, Link } from "@inertiajs/react";
|
|
import { List, Share2, CreditCard, Copyright, ArrowUpDown, Plus, Edit, Trash2, X, Facebook, Twitter, Instagram, Linkedin, Github, Youtube, Eye } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { A as AppLogo } from "./app-logo-DWyi5bLn.js";
|
|
import { B as Badge } from "./badge-J-zeQvMg.js";
|
|
import { DynamicIcon } from "lucide-react/dynamic";
|
|
import "@radix-ui/react-slot";
|
|
import "class-variance-authority";
|
|
import "./utils-DLCPGU0v.js";
|
|
import "clsx";
|
|
import "tailwind-merge";
|
|
import "@radix-ui/react-separator";
|
|
import "nprogress";
|
|
import "./scroll-area-CDdrLubh.js";
|
|
import "@radix-ui/react-scroll-area";
|
|
import "./switch-CEzDpTwE.js";
|
|
import "@radix-ui/react-switch";
|
|
import "@radix-ui/react-dialog";
|
|
import "@radix-ui/react-label";
|
|
import "@radix-ui/react-select";
|
|
import "@radix-ui/react-tabs";
|
|
const FooterEditor = ({ footer }) => {
|
|
const footerItems = footer.footer_items;
|
|
const [activeType, setActiveType] = useState("list");
|
|
const [editingItem, setEditingItem] = useState(null);
|
|
const [isFormOpen, setIsFormOpen] = useState(false);
|
|
const { data, setData, post, put, processing } = useForm({
|
|
type: "list",
|
|
slug: "",
|
|
title: "",
|
|
items: [],
|
|
active: true,
|
|
sort: 0
|
|
});
|
|
const filteredItems = footerItems.filter((item) => item.type === activeType);
|
|
const openCreateForm = (type) => {
|
|
setEditingItem(null);
|
|
setData({
|
|
type,
|
|
slug: "",
|
|
title: "",
|
|
items: [],
|
|
active: true,
|
|
sort: Math.max(...footerItems.map((item) => item.sort), 0) + 1
|
|
});
|
|
setIsFormOpen(true);
|
|
};
|
|
const openEditForm = (item) => {
|
|
setEditingItem(item);
|
|
setData({
|
|
type: item.type,
|
|
slug: item.slug,
|
|
title: item.title,
|
|
active: item.active,
|
|
items: Array.isArray(item.items) ? item.items : [],
|
|
sort: item.sort
|
|
});
|
|
setIsFormOpen(true);
|
|
};
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
if (editingItem) {
|
|
put(`/dashboard/settings/footer-items/${editingItem.id}`, {
|
|
onSuccess: () => {
|
|
setIsFormOpen(false);
|
|
router.reload({ only: ["footer"] });
|
|
}
|
|
});
|
|
} else {
|
|
post(`/dashboard/settings/footer/${footer.id}/items`, {
|
|
onSuccess: () => {
|
|
setIsFormOpen(false);
|
|
router.reload({ only: ["footer"] });
|
|
}
|
|
});
|
|
}
|
|
};
|
|
const addListItem = () => {
|
|
setData((prev) => ({ ...prev, items: [...prev.items, { title: "", url: "" }] }));
|
|
};
|
|
const updateListItem = (index, field, value) => {
|
|
const updatedItems = [...data.items];
|
|
updatedItems[index] = { ...updatedItems[index], [field]: value };
|
|
setData((prev) => ({ ...prev, items: updatedItems }));
|
|
};
|
|
const removeListItem = (index) => {
|
|
const updatedItems = data.items.filter((_, i) => i !== index);
|
|
setData((prev) => ({ ...prev, items: updatedItems }));
|
|
};
|
|
const addSocialMediaItem = () => {
|
|
setData((prev) => ({ ...prev, items: [...prev.items, { title: "", url: "", icon: "facebook" }] }));
|
|
};
|
|
const updateSocialMediaItem = (index, field, value) => {
|
|
const updatedItems = [...data.items];
|
|
updatedItems[index] = { ...updatedItems[index], [field]: value };
|
|
setData((prev) => ({ ...prev, items: updatedItems }));
|
|
};
|
|
const addPaymentMethodItem = () => {
|
|
setData((prev) => ({ ...prev, items: [...prev.items, { image: "" }] }));
|
|
};
|
|
const updatePaymentMethodItem = (index, value) => {
|
|
const updatedItems = [...data.items];
|
|
updatedItems[index] = { image: value };
|
|
setData((prev) => ({ ...prev, items: updatedItems }));
|
|
};
|
|
const removeDynamicItem = (index) => {
|
|
const updatedItems = data.items.filter((_, i) => i !== index);
|
|
setData((prev) => ({ ...prev, items: updatedItems }));
|
|
};
|
|
const socialMediaIcons = [
|
|
{ value: "facebook", label: "Facebook", icon: /* @__PURE__ */ jsx(Facebook, { className: "h-4 w-4" }) },
|
|
{ value: "twitter", label: "Twitter", icon: /* @__PURE__ */ jsx(Twitter, { className: "h-4 w-4" }) },
|
|
{ value: "instagram", label: "Instagram", icon: /* @__PURE__ */ jsx(Instagram, { className: "h-4 w-4" }) },
|
|
{ value: "linkedin", label: "LinkedIn", icon: /* @__PURE__ */ jsx(Linkedin, { className: "h-4 w-4" }) },
|
|
{ value: "github", label: "GitHub", icon: /* @__PURE__ */ jsx(Github, { className: "h-4 w-4" }) },
|
|
{ value: "youtube", label: "YouTube", icon: /* @__PURE__ */ jsx(Youtube, { className: "h-4 w-4" }) }
|
|
];
|
|
return /* @__PURE__ */ jsxs("div", { className: "p-4 sm:p-6", children: [
|
|
/* @__PURE__ */ jsxs(Tabs, { value: activeType, onValueChange: setActiveType, children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "mb-6 flex flex-col justify-between gap-6 md:flex-row md:items-center", children: [
|
|
/* @__PURE__ */ jsxs(TabsList, { className: "grid h-auto grid-cols-2 sm:h-10 sm:grid-cols-4", children: [
|
|
/* @__PURE__ */ jsxs(TabsTrigger, { value: "list", className: "flex h-8 cursor-pointer items-center gap-2", children: [
|
|
/* @__PURE__ */ jsx(List, { className: "h-4 w-4" }),
|
|
"List (",
|
|
footerItems.filter((item) => item.type === "list").length,
|
|
")"
|
|
] }),
|
|
/* @__PURE__ */ jsxs(TabsTrigger, { value: "social_media", className: "flex h-8 cursor-pointer items-center gap-2", children: [
|
|
/* @__PURE__ */ jsx(Share2, { className: "h-4 w-4" }),
|
|
"Social (",
|
|
footerItems.filter((item) => item.type === "social_media").length,
|
|
")"
|
|
] }),
|
|
/* @__PURE__ */ jsxs(TabsTrigger, { value: "payment_methods", className: "flex h-8 cursor-pointer items-center gap-2", children: [
|
|
/* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4" }),
|
|
"Payment (",
|
|
footerItems.filter((item) => item.type === "payment_methods").length,
|
|
")"
|
|
] }),
|
|
/* @__PURE__ */ jsxs(TabsTrigger, { value: "copyright", className: "flex h-8 cursor-pointer items-center gap-2", children: [
|
|
/* @__PURE__ */ jsx(Copyright, { className: "h-4 w-4" }),
|
|
"Copyright (",
|
|
footerItems.filter((item) => item.type === "copyright").length,
|
|
")"
|
|
] })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
/* @__PURE__ */ jsx(
|
|
DataSortModal,
|
|
{
|
|
title: "Footer Items",
|
|
data: filteredItems,
|
|
handler: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "flex items-center gap-2", children: [
|
|
/* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4" }),
|
|
"Reorder"
|
|
] }),
|
|
onOrderChange: (newOrder, setOpen) => {
|
|
router.post(
|
|
route("settings.footer.items.reorder"),
|
|
{
|
|
sortedData: newOrder
|
|
},
|
|
{ preserveScroll: true, onSuccess: () => setOpen && setOpen(false) }
|
|
);
|
|
},
|
|
renderContent: (item) => /* @__PURE__ */ jsxs(Card, { className: "flex w-full items-center justify-between px-4 py-3", children: [
|
|
/* @__PURE__ */ jsx("p", { children: item.title }),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
|
|
/* @__PURE__ */ jsx(Label, { htmlFor: "active", children: "Active" }),
|
|
/* @__PURE__ */ jsx(
|
|
Switch,
|
|
{
|
|
id: "active",
|
|
defaultChecked: item.active,
|
|
onCheckedChange: (checked) => {
|
|
router.put(`/dashboard/settings/navbar-items/${item.id}`, {
|
|
...item,
|
|
active: checked
|
|
});
|
|
}
|
|
}
|
|
)
|
|
] })
|
|
] })
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsxs(Button, { onClick: () => openCreateForm(activeType), className: "flex items-center gap-2", children: [
|
|
/* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
|
|
"Add ",
|
|
/* @__PURE__ */ jsx("span", { className: "capitalize", children: activeType.replace("_", " ") })
|
|
] })
|
|
] })
|
|
] }),
|
|
/* @__PURE__ */ jsx(TabsContent, { value: "list", className: "space-y-4", children: filteredItems.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-4", children: filteredItems.map((item) => /* @__PURE__ */ jsxs("div", { className: "bg-muted rounded-lg p-3", children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
|
|
/* @__PURE__ */ jsx(List, { className: "h-4 w-4" }),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
|
|
/* @__PURE__ */ jsx("div", { className: "font-medium", children: item.title }),
|
|
/* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-sm", children: item.items && Array.isArray(item.items) ? `${item.items.length} items` : "0 items" })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
|
|
/* @__PURE__ */ jsx(Button, { variant: "secondary", size: "icon", className: "h-8 w-8", onClick: () => openEditForm(item), children: /* @__PURE__ */ jsx(Edit, { className: "h-3 w-3" }) }),
|
|
/* @__PURE__ */ jsx(
|
|
DeleteModal,
|
|
{
|
|
routePath: route("settings.footer.items.destroy", item.id),
|
|
actionComponent: /* @__PURE__ */ jsx(Button, { variant: "ghost", className: "bg-destructive/8 hover:bg-destructive/6 h-8 w-8", children: /* @__PURE__ */ jsx(Trash2, { className: "text-destructive h-3 w-3" }) })
|
|
}
|
|
)
|
|
] })
|
|
] }),
|
|
item.items && Array.isArray(item.items) && /* @__PURE__ */ jsx("div", { className: "mt-2 ml-8 space-y-1", children: item.items.map((subItem, idx) => /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [
|
|
/* @__PURE__ */ jsx("span", { children: "•" }),
|
|
/* @__PURE__ */ jsx("span", { children: subItem.title }),
|
|
subItem.url && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/60", children: [
|
|
"(",
|
|
subItem.url,
|
|
")"
|
|
] })
|
|
] }, idx)) })
|
|
] }, item.id)) }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground py-8 text-center", children: 'No list items found. Click "Add List" to create one.' }) }),
|
|
/* @__PURE__ */ jsx(TabsContent, { value: "social_media", className: "space-y-4", children: filteredItems.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-4", children: filteredItems.map((item) => /* @__PURE__ */ jsx("div", { className: "bg-muted rounded-lg p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
|
|
/* @__PURE__ */ jsx(Share2, { className: "h-4 w-4" }),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
|
|
/* @__PURE__ */ jsx("div", { className: "font-medium", children: item.title }),
|
|
/* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-sm", children: item.items && Array.isArray(item.items) ? `${item.items.length} social links` : "0 social links" })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
|
|
/* @__PURE__ */ jsx(Button, { variant: "secondary", size: "icon", className: "h-8 w-8", onClick: () => openEditForm(item), children: /* @__PURE__ */ jsx(Edit, { className: "h-3 w-3" }) }),
|
|
/* @__PURE__ */ jsx(
|
|
DeleteModal,
|
|
{
|
|
routePath: route("settings.footer.items.destroy", item.id),
|
|
actionComponent: /* @__PURE__ */ jsx(Button, { variant: "ghost", className: "bg-destructive/8 hover:bg-destructive/6 h-8 w-8", children: /* @__PURE__ */ jsx(Trash2, { className: "text-destructive h-3 w-3" }) })
|
|
}
|
|
)
|
|
] })
|
|
] }) }, item.id)) }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground py-8 text-center", children: 'No social media sections found. Click "Add Social Media" to create one.' }) }),
|
|
/* @__PURE__ */ jsx(TabsContent, { value: "payment_methods", className: "space-y-4", children: filteredItems.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-4", children: filteredItems.map((item) => /* @__PURE__ */ jsx("div", { className: "bg-muted rounded-lg p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
|
|
/* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4" }),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
|
|
/* @__PURE__ */ jsx("div", { className: "font-medium", children: item.title }),
|
|
/* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-sm", children: item.items && Array.isArray(item.items) ? `${item.items.length} payment methods` : "0 payment methods" })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
|
|
/* @__PURE__ */ jsx(Button, { variant: "secondary", size: "icon", className: "h-8 w-8", onClick: () => openEditForm(item), children: /* @__PURE__ */ jsx(Edit, { className: "h-3 w-3" }) }),
|
|
/* @__PURE__ */ jsx(
|
|
DeleteModal,
|
|
{
|
|
routePath: route("settings.footer.items.destroy", item.id),
|
|
actionComponent: /* @__PURE__ */ jsx(Button, { variant: "ghost", className: "bg-destructive/8 hover:bg-destructive/6 h-8 w-8", children: /* @__PURE__ */ jsx(Trash2, { className: "text-destructive h-3 w-3" }) })
|
|
}
|
|
)
|
|
] })
|
|
] }) }, item.id)) }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground py-8 text-center", children: 'No payment methods found. Click "Add Payment Methods" to create one.' }) }),
|
|
/* @__PURE__ */ jsx(TabsContent, { value: "copyright", className: "space-y-4", children: filteredItems.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-4", children: filteredItems.map((item) => /* @__PURE__ */ jsx("div", { className: "bg-muted rounded-lg p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
|
|
/* @__PURE__ */ jsx(Copyright, { className: "h-4 w-4" }),
|
|
/* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "font-medium", children: item.title }) })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
|
|
/* @__PURE__ */ jsx(Button, { variant: "secondary", size: "icon", className: "h-8 w-8", onClick: () => openEditForm(item), children: /* @__PURE__ */ jsx(Edit, { className: "h-3 w-3" }) }),
|
|
/* @__PURE__ */ jsx(Label, { htmlFor: "active", children: "Active" }),
|
|
/* @__PURE__ */ jsx(
|
|
Switch,
|
|
{
|
|
id: "active",
|
|
checked: item.active,
|
|
onCheckedChange: (checked) => {
|
|
router.put(`/dashboard/settings/footer-items/${item.id}`, {
|
|
...item,
|
|
active: checked
|
|
});
|
|
}
|
|
}
|
|
)
|
|
] })
|
|
] }) }, item.id)) }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground py-8 text-center", children: 'No copyright text found. Click "Add Copyright" to create one.' }) })
|
|
] }),
|
|
/* @__PURE__ */ jsx(Dialog, { open: isFormOpen, onOpenChange: setIsFormOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] max-w-3xl overflow-y-auto", children: [
|
|
/* @__PURE__ */ jsxs(DialogHeader, { children: [
|
|
/* @__PURE__ */ jsxs(DialogTitle, { children: [
|
|
editingItem ? "Edit" : "Create",
|
|
" ",
|
|
data.type.charAt(0).toUpperCase() + data.type.slice(1).replace("_", " "),
|
|
" Item"
|
|
] }),
|
|
/* @__PURE__ */ jsx(DialogDescription, { children: editingItem ? "Update the details of this footer item." : "Add a new footer item to your footer." })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
|
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsx(Label, { children: "Status" }),
|
|
/* @__PURE__ */ jsxs(
|
|
Select,
|
|
{
|
|
value: data.active ? "Active" : "Inactive",
|
|
onValueChange: (value) => setData((prev) => ({ ...prev, active: value === "Active" })),
|
|
children: [
|
|
/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select status" }) }),
|
|
/* @__PURE__ */ jsxs(SelectContent, { children: [
|
|
/* @__PURE__ */ jsx(SelectItem, { value: "Active", children: "Active" }),
|
|
/* @__PURE__ */ jsx(SelectItem, { value: "Inactive", children: "Inactive" })
|
|
] })
|
|
]
|
|
}
|
|
)
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsx(Label, { htmlFor: "title", children: "Title" }),
|
|
/* @__PURE__ */ jsx(
|
|
Input,
|
|
{
|
|
id: "title",
|
|
value: data.title,
|
|
onChange: (e) => setData((prev) => ({ ...prev, title: e.target.value })),
|
|
placeholder: "Enter title",
|
|
required: true
|
|
}
|
|
)
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsx(Label, { htmlFor: "slug", children: "Slug" }),
|
|
/* @__PURE__ */ jsx(
|
|
Input,
|
|
{
|
|
id: "slug",
|
|
value: data.slug,
|
|
onChange: (e) => setData((prev) => ({ ...prev, slug: e.target.value })),
|
|
placeholder: "Enter unique slug",
|
|
required: true
|
|
}
|
|
)
|
|
] }),
|
|
data.type === "list" && /* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
|
|
/* @__PURE__ */ jsx(Label, { children: "List Items" }),
|
|
/* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addListItem, children: [
|
|
/* @__PURE__ */ jsx(Plus, { className: "mr-1 h-3 w-3" }),
|
|
"Add Item"
|
|
] })
|
|
] }),
|
|
/* @__PURE__ */ jsx("div", { className: "max-h-48 space-y-2 overflow-y-auto", children: data.items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded border p-2", children: [
|
|
/* @__PURE__ */ jsx(
|
|
Input,
|
|
{
|
|
value: item.title || "",
|
|
onChange: (e) => updateListItem(index, "title", e.target.value),
|
|
placeholder: "Title",
|
|
className: "flex-1"
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(
|
|
Input,
|
|
{
|
|
value: item.url || "",
|
|
onChange: (e) => updateListItem(index, "url", e.target.value),
|
|
placeholder: "URL (optional)",
|
|
className: "flex-1"
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeListItem(index), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
|
|
] }, index)) })
|
|
] }),
|
|
data.type === "social_media" && /* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
|
|
/* @__PURE__ */ jsx(Label, { children: "Social Media Links" }),
|
|
/* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addSocialMediaItem, children: [
|
|
/* @__PURE__ */ jsx(Plus, { className: "mr-1 h-3 w-3" }),
|
|
"Add Social Link"
|
|
] })
|
|
] }),
|
|
/* @__PURE__ */ jsx("div", { className: "max-h-48 space-y-2 overflow-y-auto", children: data.items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded border p-2", children: [
|
|
/* @__PURE__ */ jsx(
|
|
Input,
|
|
{
|
|
value: item.title || "",
|
|
onChange: (e) => updateSocialMediaItem(index, "title", e.target.value),
|
|
placeholder: "Platform name",
|
|
className: "flex-1"
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(
|
|
Input,
|
|
{
|
|
value: item.url || "",
|
|
onChange: (e) => updateSocialMediaItem(index, "url", e.target.value),
|
|
placeholder: "Profile URL",
|
|
className: "flex-1"
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsxs(Select, { value: item.icon || "facebook", onValueChange: (value) => updateSocialMediaItem(index, "icon", value), children: [
|
|
/* @__PURE__ */ jsx(SelectTrigger, { className: "w-32", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
|
|
/* @__PURE__ */ jsx(SelectContent, { children: socialMediaIcons.map((icon) => /* @__PURE__ */ jsx(SelectItem, { value: icon.value, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
icon.icon,
|
|
icon.label
|
|
] }) }, icon.value)) })
|
|
] }),
|
|
/* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeDynamicItem(index), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
|
|
] }, index)) })
|
|
] }),
|
|
data.type === "payment_methods" && /* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
|
|
/* @__PURE__ */ jsx(Label, { children: "Payment Method Images" }),
|
|
/* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addPaymentMethodItem, children: [
|
|
/* @__PURE__ */ jsx(Plus, { className: "mr-1 h-3 w-3" }),
|
|
"Add Payment Method"
|
|
] })
|
|
] }),
|
|
/* @__PURE__ */ jsx("div", { className: "max-h-48 space-y-2 overflow-y-auto", children: data.items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded border p-2", children: [
|
|
/* @__PURE__ */ jsx(
|
|
Input,
|
|
{
|
|
value: item.image || "",
|
|
onChange: (e) => updatePaymentMethodItem(index, e.target.value),
|
|
placeholder: "Image URL or path",
|
|
className: "flex-1"
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeDynamicItem(index), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
|
|
] }, index)) })
|
|
] }),
|
|
/* @__PURE__ */ jsxs(DialogFooter, { children: [
|
|
/* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => setIsFormOpen(false), children: "Cancel" }),
|
|
/* @__PURE__ */ jsx(Button, { type: "submit", disabled: processing, children: processing ? "Saving..." : editingItem ? "Update" : "Create" })
|
|
] })
|
|
] })
|
|
] }) })
|
|
] });
|
|
};
|
|
const FooterPreview = () => {
|
|
const { props } = usePage();
|
|
const { footer, system } = props;
|
|
const sortedItems = footer.footer_items.sort((a, b) => a.sort - b.sort);
|
|
const listItems = sortedItems.filter((item) => item.type === "list" && item.active);
|
|
const copyrightItem = sortedItems.find((item) => item.type === "copyright" && item.active);
|
|
const socialMediaItem = sortedItems.find((item) => item.type === "social_media" && item.active);
|
|
const paymentMethodsItem = sortedItems.find((item) => item.type === "payment_methods" && item.active);
|
|
return /* @__PURE__ */ jsxs("div", { className: `overflow-hidden bg-[rgba(255,222,99,0.06)]`, children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "space-y-9 px-4 pt-[60px] pb-5", children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-between gap-10 md:flex-row", children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "w-full space-y-5 md:max-w-[300px]", children: [
|
|
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Link, { href: "/", children: /* @__PURE__ */ jsx(AppLogo, {}) }) }),
|
|
/* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: system.fields.description }),
|
|
socialMediaItem && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: socialMediaItem.items && Array.isArray(socialMediaItem.items) && socialMediaItem.items.map((socialItem, idx) => /* @__PURE__ */ jsx(
|
|
Button,
|
|
{
|
|
size: "icon",
|
|
variant: "ghost",
|
|
className: "bg-muted hover:bg-primary hover:text-primary-foreground text-muted-foreground rounded-full transition-colors",
|
|
asChild: true,
|
|
children: /* @__PURE__ */ jsxs("a", { href: socialItem.url, target: "_blank", children: [
|
|
/* @__PURE__ */ jsx(DynamicIcon, { name: socialItem.icon, className: "h-5 w-5" }),
|
|
/* @__PURE__ */ jsx("span", { className: "sr-only", children: socialItem.title })
|
|
] })
|
|
},
|
|
idx
|
|
)) })
|
|
] }),
|
|
/* @__PURE__ */ jsx("div", { className: "flex w-full flex-col justify-between gap-10 md:max-w-[640px] md:flex-row", children: listItems.map((section) => {
|
|
var _a;
|
|
return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
|
|
/* @__PURE__ */ jsx("p", { className: "mb-3 text-lg font-semibold", children: section.title }),
|
|
/* @__PURE__ */ jsx("ul", { className: "text-muted-foreground flex flex-col gap-2 text-sm", children: (_a = section.items) == null ? void 0 : _a.map(
|
|
(item, itemIndex) => section.slug === "address" ? /* @__PURE__ */ jsx("li", { children: item.title }, `item-${itemIndex}`) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { href: item.url, children: item.title }) }, `item-${itemIndex}`)
|
|
) })
|
|
] });
|
|
}) })
|
|
] }),
|
|
paymentMethodsItem && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
|
|
/* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: paymentMethodsItem.title }),
|
|
/* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: paymentMethodsItem.items && Array.isArray(paymentMethodsItem.items) && paymentMethodsItem.items.map((paymentItem, idx) => /* @__PURE__ */ jsx("div", { className: "flex h-7 items-center justify-center gap-5 md:justify-start", children: paymentItem.image ? /* @__PURE__ */ jsx("img", { src: paymentItem.image, alt: `Payment method ${idx + 1}`, className: "h-full w-auto object-contain" }) : /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "text-xs", children: [
|
|
"Payment ",
|
|
idx + 1
|
|
] }) }, idx)) })
|
|
] })
|
|
] }),
|
|
copyrightItem && /* @__PURE__ */ jsx("div", { className: "px-6 py-8 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: copyrightItem.title }) })
|
|
] });
|
|
};
|
|
const Footer = () => {
|
|
const { props } = usePage();
|
|
const { footer, translate } = props;
|
|
const { settings, button } = translate;
|
|
const [showEditor, setShowEditor] = useState(false);
|
|
if (!footer) {
|
|
return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: settings.footer_config_not_found }) }) });
|
|
}
|
|
return /* @__PURE__ */ jsxs(Card, { children: [
|
|
/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
|
|
/* @__PURE__ */ jsx(Eye, { className: "h-5 w-5" }),
|
|
settings.live_footer_preview
|
|
] }),
|
|
/* @__PURE__ */ jsxs(CardDescription, { className: "hidden sm:block", children: [
|
|
settings.interactive_preview,
|
|
" ",
|
|
footer.title,
|
|
" (",
|
|
footer.slug,
|
|
")"
|
|
] })
|
|
] }),
|
|
showEditor ? /* @__PURE__ */ jsxs(Button, { onClick: () => setShowEditor(false), variant: "outline", children: [
|
|
/* @__PURE__ */ jsx(X, { className: "mr-2 h-4 w-4" }),
|
|
button.close
|
|
] }) : /* @__PURE__ */ jsxs(Button, { onClick: () => setShowEditor(true), className: "flex items-center gap-2", children: [
|
|
/* @__PURE__ */ jsx(Edit, { className: "h-4 w-4" }),
|
|
button.edit_footer
|
|
] })
|
|
] }) }),
|
|
/* @__PURE__ */ jsx(Separator, {}),
|
|
showEditor ? /* @__PURE__ */ jsx(FooterEditor, { footer }) : /* @__PURE__ */ jsx(CardContent, { className: "p-5", children: /* @__PURE__ */ jsx(FooterPreview, {}) })
|
|
] });
|
|
};
|
|
export {
|
|
Footer as default
|
|
};
|