Merge branch 'staging' of http://35.207.46.142/Wodey/wodey-prototype into feature/studio-layout

Merge pull request 'fix: update trash link to point to the correct creator path' (#5 ) from fix/trashNavigation into staging
Reviewed-on: http://35.207.46.142/Wodey/wodey-prototype/pulls/5
2025-04-27 13:08:12 +00:00 · 2025-04-27 12:30:53 +00:00 · 2025-04-27 12:29:11 +00:00 · 2025-04-27 12:23:13 +00:00 · 2025-04-27 12:17:10 +00:00 · 2025-04-27 12:13:35 +00:00
23 changed files with 6241 additions and 5 deletions
--- a/app/creator/layout.tsx
+++ b/app/creator/layout.tsx
@ -0,0 +1,24 @@
+import SideNav from "@/components/custom/Side_Nav";
+import Navbar from "@/components/custom/Nav_bar";
+
+export default function CreatorLayout({    
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <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>
+  );
+}
--- a/app/creator/page.tsx
+++ b/app/creator/page.tsx
@ -0,0 +1,7 @@
+export default function CreatorPage() {
+    return (
+        <div className="text-black">
+            <h1>Creator</h1>
+        </div>
+    )
+}
--- a/app/creator/studio/page.tsx
+++ b/app/creator/studio/page.tsx
@ -0,0 +1,7 @@
+import PlayGround from "@/components/custom/Play_Ground";
+
+export default function PlayGroundPage() {
+  return (
+    <PlayGround />
+  );
+}
--- a/app/creator/trash/page.tsx
+++ b/app/creator/trash/page.tsx
@ -1,7 +1,7 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

-import TrashCards, { Trash } from "../components/cards/TrashCards";
-import EmptyRecords from "../components/common/EmptyRecords";
+import TrashCards, { Trash } from "@/app/components/cards/TrashCards";
+import EmptyRecords from "@/app/components/common/EmptyRecords";

 const TrashPage = () => {
    const trashData: Trash[] = [
--- a/app/globals.css
+++ b/app/globals.css
@ -8,6 +8,7 @@
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
+  --color-sideNavColor:#010313;
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--- a/components/custom/Frame.tsx
+++ b/components/custom/Frame.tsx
@ -0,0 +1,94 @@
+'use client'
+
+import Image from 'next/image';
+import { CopyPlus, Trash2, Plus, X } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+
+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}
+            variant="outline"
+            className="flex justify-center items-center gap-2 py-2 text-[#1A237E] font-medium bg-white hover:bg-blue-50 transition-colors shadow-sm"
+            style={{ width: 410 }}
+          >
+            <Plus size={20} className="text-[#1A237E]" />
+            <span className="text-center text-[16px] font-[400]">Add new page</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/components/custom/Nav_bar.tsx
+++ b/components/custom/Nav_bar.tsx
@ -0,0 +1,34 @@
+import { Bell } from 'lucide-react';
+import { Search } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+
+export default function Navbar() {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', padding: '24px 40px', background: 'white', width: '100%', height: '75px' }}>
+      <div style={{ flex: 1, display: 'flex', justifyContent: 'flex-end', marginRight: 120 }}>
+        <div style={{ display: 'flex', alignItems: 'center', background: '#F2F4F8', borderRadius: '10px', padding: '8px 16px', minWidth: 350 }}>
+          <Search size={20} style={{ color: '#6B7280', marginRight: 8 }} />
+          <Input
+            type="text"
+            placeholder="Search ebooks, folders, and uploads"
+            className="bg-transparent text-[#6B7280] text-base w-[250px] focus-visible:ring-0 focus-visible:ring-offset-0 border-0 focus:border-0"
+          />
+        </div>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
+        <div style={{ position: 'relative', cursor: 'pointer' }}>
+          <Bell size={22} style={{ color: '#222' }} />
+          <span style={{ position: 'absolute', top: -2, right: 0, width: 9, height: 9, background: '#FF3B30', borderRadius: '50%', border: '1.5px solid white' }} />
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+          <div style={{ width: 32, height: 32, borderRadius: '50%', background: '#FFD600', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, color: '#222', fontSize: 14, position: 'relative', zIndex: 1 }}>
+            D
+          </div>
+          <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'white', border: '1px solid #E5E7EB', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, color: '#222', cursor: 'pointer', marginLeft: -8, position: 'relative', zIndex: 0 }}>
+            +
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/components/custom/Play_Ground.tsx
+++ b/components/custom/Play_Ground.tsx
@ -0,0 +1,9 @@
+import Frame from "./Frame";
+
+export default function PlayGround() {
+  return (
+    <div className="w-full">
+      <Frame />
+    </div>
+  );
+}
--- a/components/custom/Recent_Design.tsx
+++ b/components/custom/Recent_Design.tsx
@ -0,0 +1,102 @@
+import Image from "next/image";
+import { ExternalLink, Ellipsis, Trash2 } from 'lucide-react';
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+// 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">
+          <Image 
+            src="/logo.png" 
+            alt="Wodey logo" 
+            width={157}
+            height={53}
+            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>
+        
+
+        <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"
+            >
+            
+              <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={28}
+                  height={28}
+                  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 */}
+              <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>
+      </div>
+
+      {/* Trash Section */}
+      <Button variant="ghost" className="flex items-center gap-2 p-2 hover:bg-[#F5F6FA] rounded-lg mt-4 md:mt-0 w-full justify-start">
+        <Link href="/creator/trash" className="flex items-center gap-2">
+          <Trash2 className="text-[#27275A] w-[16px] md:w-[20px]" />
+          <span className="text-[#27275A] text-[12px] md:text-[14px] font-[400]">Trash</span>
+        </Link>
+      </Button>
+    </div>
+  );
+}
--- a/components/custom/Side_Nav.tsx
+++ b/components/custom/Side_Nav.tsx
@ -0,0 +1,15 @@
+import Sidebar from "./Side_bar";
+import RecentDesign from "./Recent_Design";
+
+export default function SideNav() {
+    return (
+        <div className="flex h-screen">
+            <div className="h-full">
+                <Sidebar />
+            </div>
+            <div className="h-full">
+                <RecentDesign />
+            </div>
+        </div>
+    );
+}
--- a/components/custom/Side_bar.tsx
+++ b/components/custom/Side_bar.tsx
@ -0,0 +1,77 @@
+"use client";
+
+import Image from "next/image";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Menu } from "lucide-react";
+
+
+const links = [
+  {
+    icon: "/home-icon.png",
+    label: "Home",
+    path: "/"
+  },
+  {
+    icon: "/design-icon.png",
+    label: "Design St.",
+    path: "/design"
+  }
+];
+
+
+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">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="mb-5 hover:bg-[#1a1c2b]/50"
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+          >
+            <Menu className="h-6 w-6 text-white" />
+          </Button>
+          
+          {/* Navigation Links */}
+          {links.map((link) => (
+            <div 
+              key={link.path} 
+              className={`flex flex-col items-center cursor-pointer group`}
+            >
+              <Button
+                variant="ghost"
+                size="icon"
+                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"
+                  priority={link.path === "/"} // Prioritize loading home icon
+                />
+              </Button>
+              
+              {/* 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>
+  );
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -9,14 +9,14 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "lucide-react": "^0.503.0",
+    "next": "15.3.1",
    "@radix-ui/react-avatar": "^1.1.7",
    "@radix-ui/react-slot": "^1.2.0",
    "@radix-ui/react-tabs": "^1.1.9",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "iconsax-react": "^0.0.8",
-    "lucide-react": "^0.503.0",
-    "next": "15.3.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^3.2.0"
@ -38,5 +38,6 @@
      "sharp",
      "unrs-resolver"
    ]
-  }
+  },
+  "packageManager": "pnpm@10.9.0+sha512.0486e394640d3c1fb3c9d43d49cf92879ff74f8516959c235308f5a8f62e2e19528a65cdc2a3058f587cde71eba3d5b56327c8c33a97e4c4051ca48a10ca2d5f"
 }
--- a/public/design-icon.png
+++ b/public/design-icon.png
--- a/public/home-icon.png
+++ b/public/home-icon.png
--- a/public/logo.png
+++ b/public/logo.png
--- a/public/menu-icon.png
+++ b/public/menu-icon.png
--- a/public/pdf-image.png
+++ b/public/pdf-image.png
--- a/public/recent-image-1.png
+++ b/public/recent-image-1.png
--- a/public/recent-image-2.png
+++ b/public/recent-image-2.png
--- a/public/recent-image-3.png
+++ b/public/recent-image-3.png
--- a/public/recent-image-4.png
+++ b/public/recent-image-4.png
--- a/public/recent-image-5.png
+++ b/public/recent-image-5.png
Author	SHA1	Message	Date
pious2847	f98c6d235e	Merge branch 'staging' of http://35.207.46.142/Wodey/wodey-prototype into feature/studio-layout	2025-04-27 13:08:12 +00:00
Sotware Developer I (Fullstack)	56050a6d59	Merge pull request 'fix: update trash link to point to the correct creator path' (#5 ) from fix/trashNavigation into staging Reviewed-on: http://35.207.46.142/Wodey/wodey-prototype/pulls/5	2025-04-27 12:30:53 +00:00
iamkiddy	ecac45ca9c	fix: update trash link to point to the correct creator path	2025-04-27 12:29:11 +00:00
Sotware Developer I (Fullstack)	23ab85109f	Merge pull request 'feature/studio' (#4 ) from feature/studio into staging Reviewed-on: http://35.207.46.142/Wodey/wodey-prototype/pulls/4	2025-04-27 12:23:13 +00:00
iamkiddy	2dc427259c	Merge branch 'staging' of http://35.207.46.142/Wodey/wodey-prototype into feature/studio	2025-04-27 12:17:10 +00:00
iamkiddy	1c2a2642aa	feat: replace button with Button component for consistency in Frame	2025-04-27 12:13:35 +00:00
Sotware Developer I (Fullstack)	5717a1058a	Merge pull request 'feature/sidebar' (#3 ) from feature/sidebar into staging Reviewed-on: http://35.207.46.142/Wodey/wodey-prototype/pulls/3	2025-04-27 10:01:29 +00:00
iamkiddy	82856a6779	feat: add PlayGroundPage component to render PlayGround	2025-04-27 02:42:55 +00:00
iamkiddy	7d7412bbc8	Refactor code structure for improved readability and maintainability	2025-04-27 01:51:24 +00:00
iamkiddy	e89568fece	Merge branch 'feature/sidebar' of http://35.207.46.142/Wodey/wodey-prototype into feature/sidebar	2025-04-27 00:45:44 +00:00
iamkiddy	ba1df8a261	feat: Implement Creator Layout and Pages - Added CreatorLayout component for consistent layout structure. - Created CreatorPage with a simple header. - Introduced TrashPage with tabs for managing trashed items, including images and empty states. - Developed Navbar component for navigation with search functionality and notifications. - Added RecentDesign component to display recent designs with action buttons. - Implemented SideNav component to house Sidebar and RecentDesign. - Created Sidebar component for navigation links with responsive design. - Added Input component for consistent styling across forms. - Updated package.json to include new dependencies and set package manager.	2025-04-27 00:39:20 +00:00
iamkiddy	e61e5e7ce5	fix: correct translation direction for link label animation in Sidebar component	2025-04-26 23:44:55 +00:00
iamkiddy	4ac05d5079	feat: enhance Sidebar component with menu toggle functionality and improved link interactions	2025-04-26 23:44:55 +00:00
iamkiddy	24d95e4ac4	feat: implement RecentDesign and SideNav components with sidebar navigation	2025-04-26 23:44:55 +00:00
iamkiddy	039c34ffdb	refactor: remove unnecessary return type annotation from Sidebar component	2025-04-26 23:44:55 +00:00
iamkiddy	3de81bd07a	feat: update dependencies and add new icons - Added `lucide-react` dependency. - Updated `next` version to 15.3.1. - Added new icons: design-icon.png, home-icon.png, logo.png, menu-icon.png. - Added recent images: recent-image-1.png, recent-image-2.png, recent-image-3.png, recent-image-4.png, recent-image-5.png. - Updated devDependencies: added `@eslint/eslintrc`, `@tailwindcss/postcss`, and ensured `typescript` is included.	2025-04-26 23:44:55 +00:00
iamkiddy	b74bb4e0eb	fix: correct translation direction for link label animation in Sidebar component	2025-04-26 23:15:44 +00:00
iamkiddy	7a63c50eff	feat: enhance Sidebar component with menu toggle functionality and improved link interactions	2025-04-26 23:10:45 +00:00
iamkiddy	3225ed2394	feat: implement RecentDesign and SideNav components with sidebar navigation	2025-04-26 22:48:39 +00:00
iamkiddy	b7200cc1fd	refactor: remove unnecessary return type annotation from Sidebar component	2025-04-26 20:26:25 +00:00
iamkiddy	a5364ba345	feat: update dependencies and add new icons - Added `lucide-react` dependency. - Updated `next` version to 15.3.1. - Added new icons: design-icon.png, home-icon.png, logo.png, menu-icon.png. - Added recent images: recent-image-1.png, recent-image-2.png, recent-image-3.png, recent-image-4.png, recent-image-5.png. - Updated devDependencies: added `@eslint/eslintrc`, `@tailwindcss/postcss`, and ensured `typescript` is included.	2025-04-26 20:18:30 +00:00