diff --git a/app/creator/layout.tsx b/app/creator/layout.tsx index a73dbd1..51d1209 100644 --- a/app/creator/layout.tsx +++ b/app/creator/layout.tsx @@ -8,11 +8,15 @@ export default function CreatorLayout({ }>) { return ( -
- -
- - {children} +
+
+ +
+
+
+ +
+
{children}
diff --git a/app/creator/playground/page.tsx b/app/creator/playground/page.tsx new file mode 100644 index 0000000..cbdeca3 --- /dev/null +++ b/app/creator/playground/page.tsx @@ -0,0 +1,7 @@ +import PlayGround from "@/components/custom/Play_Ground"; + +export default function PlayGroundPage() { + return ( + + ); +} \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 709f679..88f0cc9 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,3 +1,4 @@ +import Image from "next/image"; export default function Home() { return ( diff --git a/components/Recent_Design.tsx b/components/Recent_Design.tsx deleted file mode 100644 index 13974e6..0000000 --- a/components/Recent_Design.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import Image from "next/image"; -import { ExternalLink, Ellipsis, Trash2 } from 'lucide-react'; - -// Sample data for recent designs -const recentDesigns = [ - { - icon: "/recent-image-1.png", - title: "Good morning Gabe ...", - }, - { - icon: "/recent-image-2.png", - title: "Daphne's first eBook...", - }, - { - icon: "/recent-image-3.png", - title: "Story of my life (Story...", - }, - { - icon: "/recent-image-4.png", - title: "Good morning Gabe ...", - }, - { - icon: "/recent-image-5.png", - title: "A fantastic saga, the...", - }, -]; - -/** - * RecentDesign Component - * Displays a sidebar with recent designs and a trash section - */ -export default function RecentDesign() { - return ( -
- {/* Logo and Title Section */} -
-
- Wodey logo -
- - {/* Recent Designs Header */} -
Recent designs
- - {/* Recent Designs List */} -
- {recentDesigns.map((design, idx) => ( -
- {/* Design Icon */} -
- icon -
- - {/* Design Title */} - - {design.title} - - - {/* Action Buttons */} - -
- ))} -
-
- - {/* Trash Section */} -
- - Trash -
-
- ); -} \ No newline at end of file diff --git a/components/Side_Nav.tsx b/components/Side_Nav.tsx deleted file mode 100644 index c9fd604..0000000 --- a/components/Side_Nav.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import Sidebar from "./Side_bar"; -import RecentDesign from "./Recent_Design"; - - -export default function SideNav() { - return ( -
- - -
- ); -} \ No newline at end of file diff --git a/components/Side_bar.tsx b/components/Side_bar.tsx deleted file mode 100644 index bcf32a6..0000000 --- a/components/Side_bar.tsx +++ /dev/null @@ -1,73 +0,0 @@ -"use client"; - -import Image from "next/image"; -import { usePathname } from "next/navigation"; -import { useState } from "react"; - -// Navigation links configuration -const links = [ - { - icon: "/home-icon.png", - label: "Home", - path: "/" - }, - { - icon: "/design-icon.png", - label: "Design St.", - path: "/design" - } -]; - -/** - * Sidebar Component - * Displays a vertical navigation sidebar with icons and labels - */ -export default function Sidebar() { - const pathname = usePathname(); - const [isMenuOpen, setIsMenuOpen] = useState(false); - - return ( -
-
- {/* Menu Icon */} -
-
setIsMenuOpen(!isMenuOpen)} - > - logo -
- - {/* Navigation Links */} - {links.map((link) => ( -
- {/* Link Icon Container */} -
- {link.label} -
- - {/* Link Label */} -

- {link.label} -

-
- ))} -
-
-
- ); -} \ No newline at end of file diff --git a/components/custom/Frame.tsx b/components/custom/Frame.tsx new file mode 100644 index 0000000..23d4354 --- /dev/null +++ b/components/custom/Frame.tsx @@ -0,0 +1,92 @@ +'use client' + +import Image from 'next/image'; +import { CopyPlus, Trash2, Plus, X } from 'lucide-react'; +import { useState } from 'react'; + +interface Card { + id: number; + isEditing: boolean; +} + +export default function Frame() { + const [cards, setCards] = useState([]); + const [nextId, setNextId] = useState(1); + + const handleAddCard = () => { + setCards([...cards, { id: nextId, isEditing: true }]); + setNextId(nextId + 1); + }; + + const handleDeleteCard = (id: number) => { + setCards(cards.filter(card => card.id !== id)); + }; + + const totalPages = cards.length + 1; + + return ( +
+ +
+ Page 1/{totalPages} +
+ + handleDeleteCard(0)} + /> +
+
+ + +
+ +
+
+ Excerpt Card +
+
+ + + {cards.map((card, index) => ( +
+
+ Page {index + 2}/{totalPages} +
+ + handleDeleteCard(card.id)} + /> +
+
+
+
+
+ ))} + + +
+ +
+
+
+ ); +} \ No newline at end of file diff --git a/components/custom/Play_Ground.tsx b/components/custom/Play_Ground.tsx new file mode 100644 index 0000000..e1c84cb --- /dev/null +++ b/components/custom/Play_Ground.tsx @@ -0,0 +1,9 @@ +import Frame from "./Frame"; + +export default function PlayGround() { + return ( +
+ +
+ ); +} \ No newline at end of file diff --git a/components/custom/Recent_Design.tsx b/components/custom/Recent_Design.tsx index 234f565..96ad884 100644 --- a/components/custom/Recent_Design.tsx +++ b/components/custom/Recent_Design.tsx @@ -49,14 +49,14 @@ export default function RecentDesign() { {/* Recent Designs Header */}
Recent designs
- {/* Recent Designs List */} +
{recentDesigns.map((design, idx) => (
- {/* Design Icon */} +
{/* Action Buttons */} - +
+ + +
+ +
))}
diff --git a/components/custom/Side_Nav.tsx b/components/custom/Side_Nav.tsx index c9fd604..c32f226 100644 --- a/components/custom/Side_Nav.tsx +++ b/components/custom/Side_Nav.tsx @@ -1,12 +1,15 @@ import Sidebar from "./Side_bar"; import RecentDesign from "./Recent_Design"; - export default function SideNav() { return ( -
- - +
+
+ +
+
+ +
); } \ No newline at end of file diff --git a/components/custom/Side_bar.tsx b/components/custom/Side_bar.tsx index aa27528..e3c9150 100644 --- a/components/custom/Side_bar.tsx +++ b/components/custom/Side_bar.tsx @@ -6,7 +6,7 @@ import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Menu } from "lucide-react"; -// Navigation links configuration + const links = [ { icon: "/home-icon.png", @@ -20,10 +20,7 @@ const links = [ } ]; -/** - * Sidebar Component - * Displays a vertical navigation sidebar with icons and labels - */ + export default function Sidebar() { const pathname = usePathname(); const [isMenuOpen, setIsMenuOpen] = useState(false); diff --git a/public/pdf-image.png b/public/pdf-image.png new file mode 100644 index 0000000..89a5020 Binary files /dev/null and b/public/pdf-image.png differ