diff --git a/src/App.jsx b/src/App.jsx index 2866cbe..e697031 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,87 +1,107 @@ -import { useEffect } from 'react'; -import './App.css' -import Canvas from './components/Canvas' -import WebFont from 'webfontloader'; -import Header from './components/Layouts/Header'; -import SheetRightPanel from './components/Layouts/SheetRightPanel'; -import SheetLeftPanel from './components/Layouts/SheetLeftPanel'; +import { useEffect, useState } from "react"; +import "./App.css"; +// import Canvas from "./components/Canvas"; +import WebFont from "webfontloader"; +import Header from "./components/Layouts/Header"; +import SheetRightPanel from "./components/Layouts/SheetRightPanel"; +import SheetLeftPanel from "./components/Layouts/SheetLeftPanel"; import CanvasCapture from "./components/CanvasCapture"; -import { Toaster } from './components/ui/toaster'; +import { Toaster } from "./components/ui/toaster"; +import { Sidebar } from "./components/Layouts/LeftSidebar"; +import RightPanel from "./components/Layouts/RightPanel"; +import { EditorPanel } from "./components/Panel/EditorPanel"; +import { Canvas } from "./components/Panel/Canvas"; +import TextPanel from "./components/Panel/TextPanel"; +import { TopBar } from "./components/Panel/TopBar"; +import { ActionButtons } from "./components/ActionButtons"; function App() { useEffect(() => { WebFont.load({ google: { families: [ - 'Roboto:300,400,500,700', - 'Open Sans:300,400,600,700', - 'Lato:300,400,700', - 'Montserrat:300,400,500,700', - 'Raleway:300,400,500,700', - 'Poppins:300,400,500,700', - 'Merriweather:300,400,700', - 'Playfair Display:400,500,700', - 'Nunito:300,400,600,700', - 'Oswald:300,400,500,600', - 'Source Sans Pro:300,400,600,700', - 'Ubuntu:300,400,500,700', - 'Noto Sans:300,400,500,700', - 'Work Sans:300,400,500,700', - 'Bebas Neue', - 'Arimo:300,400,500,700', - 'PT Sans:300,400,700', - 'PT Serif:300,400,700', - 'Titillium Web:300,400,600,700', - 'Fira Sans:300,400,500,700', - 'Karla:300,400,600,700', - 'Josefin Sans:300,400,500,700', - 'Cairo:300,400,600,700', - 'Rubik:300,400,500,700', - 'Mulish:300,400,500,700', - 'IBM Plex Sans:300,400,500,700', - 'Quicksand:300,400,500,700', - 'Cabin:300,400,500,700', - 'Heebo:300,400,500,700', - 'Exo 2:300,400,500,700', - 'Manrope:300,400,500,700', - 'Jost:300,400,500,700', - 'Anton', - 'Asap:300,400,600,700', - 'Baloo 2:300,400,500,700', - 'Barlow:300,400,500,700', - 'Cantarell:300,400,700', - 'Chivo:300,400,500,700', - 'Inter:300,400,500,700', - 'Dosis:300,400,500,700', - 'Crimson Text:300,400,600,700', - 'Amatic SC:300,400,700', - 'ABeeZee', - 'Raleway Dots', - 'Pacifico', - 'Orbitron:300,400,500,700', - 'Varela Round', - 'Acme', - 'Teko:300,400,500,700', + "Roboto:300,400,500,700", + "Open Sans:300,400,600,700", + "Lato:300,400,700", + "Montserrat:300,400,500,700", + "Raleway:300,400,500,700", + "Poppins:300,400,500,700", + "Merriweather:300,400,700", + "Playfair Display:400,500,700", + "Nunito:300,400,600,700", + "Oswald:300,400,500,600", + "Source Sans Pro:300,400,600,700", + "Ubuntu:300,400,500,700", + "Noto Sans:300,400,500,700", + "Work Sans:300,400,500,700", + "Bebas Neue", + "Arimo:300,400,500,700", + "PT Sans:300,400,700", + "PT Serif:300,400,700", + "Titillium Web:300,400,600,700", + "Fira Sans:300,400,500,700", + "Karla:300,400,600,700", + "Josefin Sans:300,400,500,700", + "Cairo:300,400,600,700", + "Rubik:300,400,500,700", + "Mulish:300,400,500,700", + "IBM Plex Sans:300,400,500,700", + "Quicksand:300,400,500,700", + "Cabin:300,400,500,700", + "Heebo:300,400,500,700", + "Exo 2:300,400,500,700", + "Manrope:300,400,500,700", + "Jost:300,400,500,700", + "Anton", + "Asap:300,400,600,700", + "Baloo 2:300,400,500,700", + "Barlow:300,400,500,700", + "Cantarell:300,400,700", + "Chivo:300,400,500,700", + "Inter:300,400,500,700", + "Dosis:300,400,500,700", + "Crimson Text:300,400,600,700", + "Amatic SC:300,400,700", + "ABeeZee", + "Raleway Dots", + "Pacifico", + "Orbitron:300,400,500,700", + "Varela Round", + "Acme", + "Teko:300,400,500,700", ], }, }); }, []); - return ( -
- - -
- + const [selectedItem, setSelectedItem] = useState("text"); + const [hasSelectedObject, setHasSelectedObject] = useState(true); -
-
- - -
-
+ return ( + //
+ // + // + //
+ // + + //
+ //
+ // + // + //
+ //
+ //
+ +
+ + {selectedItem === "text" && } +
+ + + +
- ) + ); } -export default App +export default App; diff --git a/src/components/ActionButtons.jsx b/src/components/ActionButtons.jsx new file mode 100644 index 0000000..3532a02 --- /dev/null +++ b/src/components/ActionButtons.jsx @@ -0,0 +1,82 @@ +import { ChevronDown } from "lucide-react"; +import { Button } from "./ui/button"; + +export function ActionButtons() { + return ( +
+
+ +
+
+ +
+
+ ); +} diff --git a/src/components/Layouts/LeftSidebar.jsx b/src/components/Layouts/LeftSidebar.jsx new file mode 100644 index 0000000..c4e093a --- /dev/null +++ b/src/components/Layouts/LeftSidebar.jsx @@ -0,0 +1,35 @@ +import { cn } from "@/lib/utils"; +import { Text, Square, Upload, Shield, Image, Folder } from "lucide-react"; + +const sidebarItems = [ + { id: "design", icon: Text, label: "Design" }, + { id: "text", icon: Text, label: "Text" }, + { id: "shape", icon: Square, label: "Shape" }, + { id: "upload", icon: Upload, label: "Upload" }, + { id: "icon", icon: Shield, label: "Icon" }, + { id: "image", icon: Image, label: "Image" }, + { id: "project", icon: Folder, label: "Project" }, +]; + +export function Sidebar({ selectedItem, onItemSelect }) { + return ( +
+ {sidebarItems.map((item) => { + const Icon = item.icon; + return ( + + ); + })} +
+ ); +} diff --git a/src/components/Layouts/RightPanel.jsx b/src/components/Layouts/RightPanel.jsx new file mode 100644 index 0000000..ccb461d --- /dev/null +++ b/src/components/Layouts/RightPanel.jsx @@ -0,0 +1,28 @@ +import { X } from "lucide-react"; +import { Button } from "../ui/button"; +import DesignPanel from "../Panel/DesignPanel"; +// import TextPanel from "../Panel/TextPanel"; +import ShapePanel from "../Panel/ShapePanel"; + +const panels = { + design: DesignPanel, + // text: TextPanel, + shape: ShapePanel, + // Add other panels as needed +}; + +export default function RightPanel({ activePanel }) { + const PanelComponent = panels[activePanel] || (() => null); + + return ( +
+
+

{activePanel}

+ +
+ +
+ ); +} diff --git a/src/components/Panel/Canvas.jsx b/src/components/Panel/Canvas.jsx new file mode 100644 index 0000000..8eb5fa9 --- /dev/null +++ b/src/components/Panel/Canvas.jsx @@ -0,0 +1,10 @@ +export function Canvas() { + return ( +
+ {/* Main Canvas Area */} +
+
+
+
+ ); +} diff --git a/src/components/Panel/DesignPanel.jsx b/src/components/Panel/DesignPanel.jsx new file mode 100644 index 0000000..6de251e --- /dev/null +++ b/src/components/Panel/DesignPanel.jsx @@ -0,0 +1,38 @@ +import { Label } from "../ui/label"; +import { Slider } from "../ui/slider"; + +export default function DesignPanel() { + return ( +
+
+ +
+ {Array.from({ length: 4 }).map((_, i) => ( +
+ ))} +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ ); +} diff --git a/src/components/Panel/EditorPanel.jsx b/src/components/Panel/EditorPanel.jsx new file mode 100644 index 0000000..c04c2d5 --- /dev/null +++ b/src/components/Panel/EditorPanel.jsx @@ -0,0 +1,56 @@ +import { Plus, Search, Upload } from "lucide-react"; +import { Button } from "../ui/button"; +import { Input } from "../ui/input"; + +export function EditorPanel({ type }) { + if (!type) return null; + + const panelContent = { + text: ( + <> +

Text

+ +
+ + + +
+ + ), + shape: ( + <> +

Shape

+
+ + +
+
+ {[...Array(6)].map((_, i) => ( +
+ ))} +
+ + ), + image: ( + <> +

Image

+ +
+ {[...Array(4)].map((_, i) => ( +
+ ))} +
+ + ), + }; + + return ( +
+ {panelContent[type]} +
+ ); +} diff --git a/src/components/Panel/ShapePanel.jsx b/src/components/Panel/ShapePanel.jsx new file mode 100644 index 0000000..4bc9728 --- /dev/null +++ b/src/components/Panel/ShapePanel.jsx @@ -0,0 +1,20 @@ +import { Input } from "../ui/input"; +import { ScrollArea } from "../ui/scroll-area"; + +export default function ShapePanel() { + return ( +
+ + +
+ {Array.from({ length: 9 }).map((_, i) => ( +
+ ))} +
+ +
+ ); +} diff --git a/src/components/Panel/TextPanel.jsx b/src/components/Panel/TextPanel.jsx new file mode 100644 index 0000000..e651a4a --- /dev/null +++ b/src/components/Panel/TextPanel.jsx @@ -0,0 +1,57 @@ +import { Button } from "../ui/Button"; +import { Input } from "../ui/Input"; +import { X } from "lucide-react"; +import { ScrollArea } from "../ui/scroll-area"; + +export default function TextPanel() { + return ( +
+ +
+

Text

+ +
+ + + +
+
+

+ Default text style +

+ + + +
+ +
+
+

Text Design

+ +
+
+ {[...Array(6)].map((_, i) => ( +
+ ))} +
+
+
+ +
+ ); +} diff --git a/src/components/Panel/TopBar.jsx b/src/components/Panel/TopBar.jsx new file mode 100644 index 0000000..a5c6b47 --- /dev/null +++ b/src/components/Panel/TopBar.jsx @@ -0,0 +1,101 @@ +import { + AlignCenter, + AlignLeft, + AlignRight, + Bold, + Italic, + Lock, + Underline, +} from "lucide-react"; +import { Button } from "../ui/Button"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "../ui/Select"; + +export function TopBar({ isVisible = false }) { + if (!isVisible) return null; + + return ( +
+
+ + +
+ +
12
+ +
+ +
+ +
+ + + +
+ +
+ +
+ + + +
+ +
+ + + + +
+
+ ); +} diff --git a/src/index.css b/src/index.css index c3f9dc9..02a48d8 100644 --- a/src/index.css +++ b/src/index.css @@ -150,6 +150,6 @@ } body { - @apply bg-background text-foreground; + @apply bg-[#f5f0ff] text-foreground; } -} \ No newline at end of file +}