diff --git a/app/(tools)/background-snippets/page.tsx b/app/(tools)/background-snippets/page.tsx index 077a53c..87e8e61 100644 --- a/app/(tools)/background-snippets/page.tsx +++ b/app/(tools)/background-snippets/page.tsx @@ -2,7 +2,6 @@ import BackgroundSnippetsGenerator from "@/components/view/background-snippets"; import { siteConfig } from "@/lib/utils"; import type { Metadata } from "next"; import React from "react"; -import { ToolPlaygroundShell } from "@/components/common/tool-playground-shell"; export const metadata: Metadata = { title: "Background Snippets Generator", description: @@ -57,18 +56,7 @@ export const metadata: Metadata = { }, }; function page() { - return ( - - - - ); + return ; } -export default page; \ No newline at end of file +export default page; diff --git a/app/(tools)/color-lab/page.tsx b/app/(tools)/color-lab/page.tsx index 0a7e766..3a75e95 100644 --- a/app/(tools)/color-lab/page.tsx +++ b/app/(tools)/color-lab/page.tsx @@ -1,9 +1,7 @@ -import ClipPathGenerator from "@/components/view/clip-path"; import ColorConverter from "@/components/view/colors"; import { siteConfig } from "@/lib/utils"; import type { Metadata } from "next"; -import React, { Suspense } from "react"; -import { ToolPlaygroundShell } from "@/components/common/tool-playground-shell"; +import React from "react"; export const metadata: Metadata = { title: "Color Lab – Generate Color Palettes, Convert Codes & Build Shadcn Themes", @@ -69,34 +67,8 @@ export const metadata: Metadata = { creator: "@naymur_dev", }, }; -const PageLoading = () => { - return ( - <> -
-
- {Array.from({ length: 18 }).map((_, index) => ( -
- ))} -
- - ); -}; function page() { - return ( - - - - ); + return ; } -export default page; \ No newline at end of file +export default page; diff --git a/app/(tools)/layout.tsx b/app/(tools)/layout.tsx index 97e13ae..d9cd48f 100644 --- a/app/(tools)/layout.tsx +++ b/app/(tools)/layout.tsx @@ -9,7 +9,10 @@ function Toolslayout({ children }: { children: React.ReactNode }) { const isFullPlayground = pathname === "/svg-line-draw" || pathname === "/shadows" || - pathname === "/clip-paths"; + pathname === "/clip-paths" || + pathname === "/mesh-gradients" || + pathname === "/background-snippets" || + pathname === "/color-lab"; return (
diff --git a/app/(tools)/mesh-gradients/page.tsx b/app/(tools)/mesh-gradients/page.tsx index 34f9496..b040391 100644 --- a/app/(tools)/mesh-gradients/page.tsx +++ b/app/(tools)/mesh-gradients/page.tsx @@ -2,7 +2,6 @@ import { ShaderGradientGenerator } from "@/components/view/mesh-gradient"; import { siteConfig } from "@/lib/utils"; import type { Metadata } from "next"; import React from "react"; -import { ToolPlaygroundShell } from "@/components/common/tool-playground-shell"; export const metadata: Metadata = { title: "Mesh-Gradient Generator", description: @@ -52,18 +51,7 @@ export const metadata: Metadata = { }; function page() { - return ( - - - - ); + return ; } -export default page; \ No newline at end of file +export default page; diff --git a/components/view/background-snippets/index.tsx b/components/view/background-snippets/index.tsx index d582e61..452dce3 100644 --- a/components/view/background-snippets/index.tsx +++ b/components/view/background-snippets/index.tsx @@ -2,25 +2,31 @@ import { useState } from "react"; +import { Button } from "@/components/ui/button"; import { ScrollArea } from "@/components/ui/scroll-area"; -import { Switch } from "@/components/ui/switch"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { useMediaQuery } from "@/components/ui/use-media-query"; +import ThemeSwitch from "@/components/theme-switcher"; import { useGradientStops } from "@/hooks/use-gradient-stops"; import { cn } from "@/lib/utils"; -import { ChevronsDown } from "lucide-react"; +import { Bookmark, PanelsTopLeft, Settings2, SidebarClose, SidebarOpen } from "lucide-react"; +import { usePathname, useRouter } from "next/navigation"; import { CodeDisplay } from "./code-output/code-display"; import { getFullCode } from "./code-output/code-generator"; import { ColorPickerPopover } from "./color-pickers/color-picker-popover"; import { GradientControls } from "./gradient-controls/gradient-controls"; import { MaskControls } from "./mask-controls/mask-controls"; import { PatternControls } from "./pattern-controls/pattern-controls"; -import { type IPreset, presets } from "./preset/data"; -import { PresetCard, PresetGallery } from "./preset/preset-gallery"; +import type { IPreset } from "./preset/data"; +import { PresetGallery } from "./preset/preset-gallery"; import { BackgroundPreview } from "./preview/background-preview"; export default function BackgroundPatternGenerator() { const isMobile = useMediaQuery("(max-width:1024px)"); - const [viewAll, setViewAll] = useState(false); + const [activeSidebarTab, setActiveSidebarTab] = useState<"presets" | "settings" | "saved">("settings"); + const [isSidebarExpanded, setIsSidebarExpanded] = useState(true); + const pathname = usePathname(); + const router = useRouter(); const [patternType, setPatternType] = useState("grid"); const [bgColor, setBgColor] = useState("#000000"); @@ -220,68 +226,34 @@ export default function BackgroundPatternGenerator() { return ( <> - - -
- {!viewAll && ( -
- )} - {(viewAll ? presets : presets.slice(0, 10)).map((preset) => ( - - ))} -
- {isMobile && ( -

- Please use a desktop/laptop to view the Editor. -

- )} -
- {!isMobile && ( - +
+
+ {!isMobile &&
+
{[{ key: "presets", label: "Presets", icon: PanelsTopLeft }, { key: "settings", label: "Settings", icon: Settings2 }, { key: "saved", label: "Saved", icon: Bookmark }].map((item)=>)}
+
+ + + +
+
} + {!isMobile &&
-
+ {activeSidebarTab === "settings" &&
-
-
+
} + {activeSidebarTab === "settings" &&
-
- {/*
- -
*/} +
} + {activeSidebarTab === "presets" && } + {activeSidebarTab === "saved" &&

Saved snippets will appear here.

}
- - )} + } -
+
-
- -
+
diff --git a/components/view/colors/index.tsx b/components/view/colors/index.tsx index ff4451b..dd97d3b 100644 --- a/components/view/colors/index.tsx +++ b/components/view/colors/index.tsx @@ -29,7 +29,11 @@ import { parseRgba, rgbToHex, } from "@/lib/color-utils"; -import { ChevronsDown, Pipette } from "lucide-react"; +import { Pipette } from "lucide-react"; +import { Bookmark, PanelsTopLeft, Settings2 } from "lucide-react"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { cn } from "@/lib/utils"; +import { usePathname, useRouter } from "next/navigation"; import { useState } from "react"; import { AllColorFormats } from "./all-color-formats"; import { ColorPaletteSection } from "./color-palette-section"; @@ -40,6 +44,10 @@ import { ThemeGenerator } from "./theme-generator"; export default function ColorConverter() { const [showPalette, setShowPalette] = useState(true); // Show palette by default + const [activeSidebarTab, setActiveSidebarTab] = useState<"presets" | "settings" | "saved">("settings"); + const [isSidebarExpanded, setIsSidebarExpanded] = useState(true); + const pathname = usePathname(); + const router = useRouter(); const { hexValue, @@ -300,33 +308,21 @@ export default function ColorConverter() { return ( <> -
-
-

- Play, Pick, Convert and
Generate New Colors 🎨 -

- -
- {/*
- Expand - -
*/} - - Shadcn/ui theme - - +
+
+
+
{[{ key: "presets", label: "Presets", icon: PanelsTopLeft }, { key: "settings", label: "Settings", icon: Settings2 }, { key: "saved", label: "Saved", icon: Bookmark }].map((item)=>)}
+ +
+ -
-
-
+
+
{/* Main Color Picker */}
+
+ {/* Theme Generator Section */} +
- {/* Theme Generator Section */} -
diff --git a/components/view/mesh-gradient/index.tsx b/components/view/mesh-gradient/index.tsx index 6058b02..a4c8bcd 100644 --- a/components/view/mesh-gradient/index.tsx +++ b/components/view/mesh-gradient/index.tsx @@ -1,8 +1,8 @@ "use client"; import { Button } from "@/components/ui/button"; -import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; -import { Switch } from "@/components/ui/switch"; +import { ScrollArea } from "@/components/ui/scroll-area"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { useMediaQuery } from "@/components/ui/use-media-query"; import { cn } from "@/lib/utils"; import type { @@ -15,7 +15,8 @@ import type { } from "@/types/shader-gradient"; import { ShaderGradientCanvas } from "@shadergradient/react"; import { ShaderGradient } from "@shadergradient/react"; -import { ChevronsDown, Menu, MenuIcon } from "lucide-react"; +import { Bookmark, PanelsTopLeft, Settings2 } from "lucide-react"; +import { usePathname, useRouter } from "next/navigation"; import { type JSX, Suspense, useState } from "react"; import { ControlPanel } from "./control-panel"; import { CopyCode } from "./copy-code"; @@ -256,11 +257,13 @@ const allControls: ControlSections = { export function ShaderGradientGenerator(): JSX.Element { const isMobile = useMediaQuery("(max-width:1024px)"); - const [viewAll, setViewAll] = useState(false); - const [settings, setSettings] = useState(defaultSettings); const [selectedExample, setSelectedExample] = useState(""); + const [activeSidebarTab, setActiveSidebarTab] = useState<"presets" | "settings" | "saved">("settings"); + const [isSidebarExpanded, setIsSidebarExpanded] = useState(true); + const pathname = usePathname(); + const router = useRouter(); const updateSettings = ( newSettings: Partial, ): void => { @@ -269,106 +272,73 @@ export function ShaderGradientGenerator(): JSX.Element { return ( <> - - -
- {!viewAll && ( -
- )} - - {(viewAll ? ExampleGradients : ExampleGradients.slice(0, 10)).map( - (mesh) => ( -
{ - setSelectedExample(mesh.id); - setSettings(mesh?.settings); - }} - onKeyDown={(e) => { - if (e.key === "Enter") { - setSelectedExample(mesh.id); - setSettings(mesh?.settings); - } - }} - > -
- {mesh?.settings?.grain === "on" && ( -
- )} -
-
- ), - )} -
{isMobile && (

Please use a desktop/laptop to view the Editor.

)} -
- {/* Left Column: Control Panel */} - {!isMobile && ( -
- - +
+ {!isMobile &&
+
+ {[{ key: "presets", label: "Presets", icon: PanelsTopLeft }, { key: "settings", label: "Settings", icon: Settings2 }, { key: "saved", label: "Saved", icon: Bookmark }].map((item) => ( + + ))} +
+ +
} + {!isMobile && - )} + />} + {activeSidebarTab === "presets" && ( +
+ {ExampleGradients.map((example) => ( + + ))} +
+ )} + {activeSidebarTab === "saved" &&

Saved gradients will appear here.

} + +
} {/* Middle Column: Gradient Preview */} -
+
+
@@ -421,40 +391,9 @@ export function ShaderGradientGenerator(): JSX.Element {
- -
- {ExampleGradients.map((example, _index) => ( - - ))} -
- - +
+
-
- + ); }