Wodey/wodey-prototype
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/sidebar #3

Merged
Yussif merged 14 commits from feature/sidebar into staging 2025-04-27 10:01:30 +00:00
Conversation 0 Commits 14 Files Changed 24 +141 -187
12 changed files with 141 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7d7412bbc8 - Show all commits

14
app/creator/layout.tsx
View File

@ -8,11 +8,15 @@ export default function CreatorLayout({
}>) {
return (
<html lang="en">
<div className="flex">
<SideNav />
<div className="flex flex-col w-full">
<Navbar />
<body className="antialiased bg-[#F3F3F3]">{children}</body>
<div className="flex min-h-screen">
<div className="fixed left-0 top-0 h-screen">
<SideNav />
</div>
<div className="flex flex-col w-full ml-[380px]">
<div className="fixed top-0 right-0 left-[380px] z-10">
<Navbar />
</div>
<main className="flex-1 p-6 bg-[#F3F3F3] mt-[75px]">{children}</main>
</div>
</div>
</html>

7
app/creator/playground/page.tsx Normal file
View File

@ -0,0 +1,7 @@
import PlayGround from "@/components/custom/Play_Ground";
export default function PlayGroundPage() {
return (
<PlayGround />
);
}

1
app/page.tsx
View File

@ -1,3 +1,4 @@
import Image from "next/image";
export default function Home() {
return (

80
components/Recent_Design.tsx
View File

@ -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 (
<div className="bg-white border-t md:border-t-0 md:border-r border-[#D9D7D7] w-full md:w-[300px] flex flex-col h-auto md:h-screen justify-between p-4 md:px-4 md:pt-6 md:pb-4">
{/* Logo and Title Section */}
<div>
<div className="flex flex-col items-center mb-6 md:mb-12">
<img src="/logo.png" alt="Wodey logo" className="w-[120px] md:w-[157px] h-auto md:h-[53px]" />
</div>
{/* Recent Designs Header */}
<div className="text-[#27275A] text-[12px] font-[400] mb-2 pl-1">Recent designs</div>
{/* Recent Designs List */}
<div className="grid grid-cols-2 md:flex md:flex-col gap-2">
{recentDesigns.map((design, idx) => (
<div
key={idx}
className="flex items-center bg-white rounded-lg py-2 px-2 hover:bg-[#F5F6FA] group transition cursor-pointer"
>
{/* Design Icon */}
<div className="w-6 h-6 md:w-8 md:h-8 flex items-center justify-center mr-2">
<Image src={design.icon} alt="icon" width={24} height={24} className="w-5 h-5 md:w-7 md:h-7" />
</div>
{/* Design Title */}
<span className="flex-1 text-[10px] text-[#27275A] truncate max-w-[100px] md:max-w-[120px] font-[400]">
{design.title}
</span>
{/* Action Buttons */}
<button className="p-1 rounded hover:bg-gray-100 transition">
<div className="flex items-center gap-1 md:gap-2">
<ExternalLink className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[8px] p-1 w-4 h-4 md:w-5 md:h-5" />
<Ellipsis className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[8px] p-1 w-4 h-4 md:w-5 md:h-5" />
</div>
</button>
</div>
))}
</div>
</div>
{/* Trash Section */}
<div className="flex items-center gap-2 pl-1 cursor-pointer hover:bg-[#F5F6FA] rounded-lg p-2 mt-4 md:mt-0">
<Trash2 className="text-[#27275A] w-[16px] md:w-[20px]" />
<span className="text-[#27275A] text-[12px] md:text-[14px] font-[400]">Trash</span>
</div>
</div>
);
}

12
components/Side_Nav.tsx
View File

@ -1,12 +0,0 @@
import Sidebar from "./Side_bar";
import RecentDesign from "./Recent_Design";
export default function SideNav() {
return (
<div className="flex flex-col md:flex-row">
<Sidebar />
<RecentDesign />
</div>
);
}

73
components/Side_bar.tsx
View File

@ -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 (
<div className={`bg-[#050616] w-full md:w-[80px] h-auto md:h-screen transition-all duration-300 ease-in-out ${isMenuOpen ? 'md:w-[200px]' : ''}`}>
<div className="flex md:flex-col items-center justify-center gap-4 p-4 md:pt-10">
{/* Menu Icon */}
<div className="flex md:flex-col items-center gap-4 md:gap-6">
<div
className="cursor-pointer hover:opacity-80 transition-opacity duration-200 mb-5"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
<Image
src="/menu-icon.png"
alt="logo"
width={24}
height={24}
/>
</div>
{/* Navigation Links */}
{links.map((link) => (
<div
key={link.path}
className={`flex flex-col items-center cursor-pointer group`}
>
{/* Link Icon Container */}
<div className={`p-2 rounded-lg transition-colors duration-200 ${pathname === link.path ? 'bg-[#1a1c2b]' : 'group-hover:bg-[#1a1c2b]/50'}`}>
<Image
src={link.icon}
alt={link.label}
width={24}
height={24}
className="group-hover:opacity-80 transition-opacity duration-200"
/>
</div>
{/* Link Label */}
<p className={`text-white text-xs mt-1 transition-all duration-300 ease-in-out ${isMenuOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-4'} group-hover:opacity-80`}>
{link.label}
</p>
</div>
))}
</div>
</div>
</div>
);
}

92
components/custom/Frame.tsx Normal file
View File

@ -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<Card[]>([]);
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 (
<div className="min-h-screen flex flex-col items-center justify-center">
<div className="w-[450px] flex items-center justify-between px-4 py-2 mb-2" style={{ minHeight: 40 }}>
<span className="text-[#2633B9] text-[14px] font-[#1A237E400]">Page 1/{totalPages}</span>
<div className="flex gap-2">
<CopyPlus
size={18}
className="cursor-pointer text-[#1A237E] hover:text-blue-600"
onClick={handleAddCard}
/>
<Trash2
size={18}
className="cursor-pointer text-[#1A237E] hover:text-red-600"
onClick={() => handleDeleteCard(0)}
/>
</div>
</div>
<div className="flex flex-col items-center gap-8">
<div className="w-[450px] flex flex-col items-center">
<div className="w-[410px] h-[510px] flex items-center justify-center">
<Image src="/pdf-image.png" alt="Excerpt Card" width={410} height={510} style={{ objectFit: 'contain' }} />
</div>
</div>
{cards.map((card, index) => (
<div key={card.id} className="w-[450px] flex flex-col items-center">
<div className="w-full flex items-center justify-between px-4 py-2 mb-2" style={{ minHeight: 40 }}>
<span className="text-[#2633B9] text-[14px] font-[#1A237E400]">Page {index + 2}/{totalPages}</span>
<div className="flex gap-2">
<CopyPlus
size={18}
className="cursor-pointer text-[#1A237E] hover:text-blue-600"
onClick={handleAddCard}
/>
<Trash2
size={18}
className="cursor-pointer text-[#1A237E] hover:text-red-600"
onClick={() => handleDeleteCard(card.id)}
/>
</div>
</div>
<div className="w-[410px] h-[510px] bg-white rounded-lg shadow-md">
</div>
</div>
))}
<div className="w-[450px] flex justify-center">
<button
onClick={handleAddCard}
className="flex justify-center items-center gap-2 py-2 border-2 rounded-xs text-[#1A237E] font-medium bg-white hover:bg-blue-50 transition-colors shadow-sm"
style={{ borderColor: '#D9D7D7', width: 410 }}
>
<Plus size={20} className="text-[#1A237E]" />
<span className="text-center text-[16px] font-[400]">Add new page</span>
</button>
</div>
</div>
</div>
);
}

9
components/custom/Play_Ground.tsx Normal file
View File

@ -0,0 +1,9 @@
import Frame from "./Frame";
export default function PlayGround() {
return (
<div className="w-full">
<Frame />
</div>
);
}

22
components/custom/Recent_Design.tsx
View File

@ -49,14 +49,14 @@ export default function RecentDesign() {
{/* Recent Designs Header */}
<div className="text-[#27275A] text-[12px] font-[400] mb-2 pl-1">Recent designs</div>
{/* Recent Designs List */}
<div className="grid grid-cols-2 md:flex md:flex-col gap-2">
{recentDesigns.map((design, idx) => (
<div
key={idx}
className="flex items-center bg-white rounded-lg py-2 px-2 hover:bg-[#F5F6FA] group transition cursor-pointer"
>
{/* Design Icon */}
<div className="w-6 h-6 md:w-8 md:h-8 flex items-center justify-center mr-2">
<Image
src={design.icon}
@ -73,12 +73,18 @@ export default function RecentDesign() {
</span>
{/* Action Buttons */}
<Button variant="ghost" size="icon" className="h-8 w-8 p-1">
<div className="flex items-center gap-1 md:gap-2">
<ExternalLink className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[8px] p-1 w-4 h-4 md:w-5 md:h-5" />
<Ellipsis className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[8px] p-1 w-4 h-4 md:w-5 md:h-5" />
</div>
</Button>
<div className="ml-auto">
<Button variant="ghost" size="icon" className="h-10 w-10 p-1">
<div className="flex items-center gap-0.5 md:gap-1 pr-5">
<Button variant="ghost" size="icon" className="h-7 w-7 md:h-8 md:w-8 p-0 hover:bg-[#e6e6e8]">
<ExternalLink className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[4px] p-1 w-7 h-7 md:w-8 md:h-8" />
</Button>
<Button variant="ghost" size="icon" className="h-7 w-7 md:h-8 md:w-8 p-0 hover:bg-[#e6e6e8]">
<Ellipsis className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[4px] p-1 w-7 h-7 md:w-8 md:h-8" />
</Button>
</div>
</Button>
</div>
</div>
))}
</div>

11
components/custom/Side_Nav.tsx
View File

@ -1,12 +1,15 @@
import Sidebar from "./Side_bar";
import RecentDesign from "./Recent_Design";
export default function SideNav() {
return (
<div className="flex flex-col md:flex-row">
<Sidebar />
<RecentDesign />
<div className="flex h-screen">
<div className="h-full">
<Sidebar />
</div>
<div className="h-full">
<RecentDesign />
</div>
</div>
);
}

7
components/custom/Side_bar.tsx
View File

@ -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);

BIN
public/pdf-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB