import { IonIcon } from "@ionic/react" import postcss from "postcss" import { chevronForward, closeOutline, helpCircle } from "ionicons/icons" import { useEffect, useState } from "react" import { useDispatch, useSelector } from "react-redux" import PageCustomizeLayout from "@/Admin/Layouts/PageCustomizeLayout" import { Head, Link, router } from "@inertiajs/react" import GeneralCustomize from "@/Admin/Components/SectionCustomize/GeneralCustomize" import SidebarCustomize from "@/Admin/Components/SectionCustomize/SidebarCustomize" import FooterCustomize from "@/Admin/Components/SectionCustomize/FooterCustomize" import SocialLinkCustomize from "@/Admin/Components/SectionCustomize/SocialLinkCustomize" import CustomizeContact from "@/Admin/Components/SectionCustomize/CustomizeContact" import SubscribeCustomize from "@/Admin/Components/SectionCustomize/SubscribeCustomize" import { updateContact, updateCustomCss, updateFooter, updateGeneral, updateHtmlEmbedCode, updateSidebar, updateSocialLink, updateSubscribe } from "@/Redux/features/pages/Customize/customize" import toast from "react-hot-toast" import HtmlEmbedCustomize from "@/Admin/Components/SectionCustomize/HtmlEmbedCustomize" import { clearState } from "@/Redux/features/pages/Page/page" import CustomCSSCustomizer from "@/Admin/Components/SectionCustomize/CustomCSSCustomizer" import { Icon } from "@iconify/react" export default function Customize({ customize_settings }) { const dispatch = useDispatch() const customize = useSelector((state) => state.customize) const [isExpandInfo, setIsExpandInfo] = useState(false) const [isOpen, setIsOpen] = useState(false) const [expandCustomize, setExpandCustomize] = useState("") // handle expand const handleExpand = (name) => { setExpandCustomize(name) setIsOpen(true) } // conditional customize section render let customizeSection = "" switch (expandCustomize) { case "general": customizeSection = break case "sidebar": customizeSection = break case "footer": customizeSection = break case "social": customizeSection = break case "contact": customizeSection = break case "subscriber": customizeSection = break case "css": customizeSection = break case "html_embed": customizeSection = break } // handle publish const handlePublish = () => { if (customize.custom_css) { try { postcss.parse(customize.custom_css) } catch (error) { toast.error("You entered invalid css") return console.log("Invalid CSS") } } router.put(route("admin.customize.customize"), customize) } useEffect(() => { dispatch(updateGeneral(customize_settings.general)) dispatch(updateSidebar(customize_settings.sidebar)) dispatch(updateFooter(customize_settings.footer)) dispatch(updateContact(customize_settings.contact)) dispatch(updateSubscribe(customize_settings.subscriber)) dispatch(updateSocialLink(customize_settings.social_links)) dispatch(updateCustomCss(customize_settings.custom_css.custom_css)) dispatch(updateHtmlEmbedCode(customize_settings.html_embed_code.html_embed_code)) }, [customize_settings]) useEffect(() => { return () => { dispatch(clearState()) } }, []) return (
You are customizing
Website setIsExpandInfo(!isExpandInfo)} icon={helpCircle} />

The Customizer allows you to preview changes to your site before publishing them. You can't navigate to different pages on your site within the preview. Edit shortcuts are shown for some editable elements, and you can also sort sections by drag and drop.

handleExpand("general")}>

General

handleExpand("sidebar")}>

Sidebar

handleExpand("footer")}>

Footer

handleExpand("social")}>

Social Links

handleExpand("contact")}>

Contacts Info

{/*
handleExpand("subscriber")} >

Subscriber

*/}
handleExpand("css")}>

Custom CSS

handleExpand("html_embed")}>

HTML Embed

Customizing
{expandCustomize} Section
{customizeSection}
 ) }