diff --git a/app/creator/(home)/layout.tsx b/app/creator/(home)/layout.tsx index 15811bd..870861a 100644 --- a/app/creator/(home)/layout.tsx +++ b/app/creator/(home)/layout.tsx @@ -1,26 +1,48 @@ 'use client' -import { useState } from "react"; +import { useState, useEffect } from 'react'; import SideNav from "@/components/custom/Side_Nav"; import Navbar from "@/components/custom/Nav_bar"; + export default function CreatorLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { + const [isMobile, setIsMobile] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false); + + useEffect(() => { + // Function to handle resize and set mobile state + const handleResize = () => { + setIsMobile(window.innerWidth < 768); + }; + + // Set initial state + handleResize(); + + // Add event listener + window.addEventListener("resize", handleResize); + + // Cleanup + return () => window.removeEventListener("resize", handleResize); + }, []); + return (
-
- + {/* SideNav - hidden on mobile, fixed on desktop */} +
+
-
-
- + + {/* Main content - full width on mobile, with margin on desktop */} +
+
+
-
{children}
+
{children}
diff --git a/app/creator/(home)/page.tsx b/app/creator/(home)/page.tsx index e0856a0..5d4d8fe 100644 --- a/app/creator/(home)/page.tsx +++ b/app/creator/(home)/page.tsx @@ -1,17 +1,13 @@ import { Home_Banner } from "@/components/Home_Banner"; import Recent_Creation from "@/components/Recent_Creation"; - const CreatorPage: React.FC = () => { return ( -
+
); }; - - - -export default CreatorPage; +export default CreatorPage; \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index 6125d0c..e25f169 100644 --- a/app/globals.css +++ b/app/globals.css @@ -131,12 +131,6 @@ background-position: center center; background-blend-mode: multiply; border-radius: 10px; - padding: 8px; - display: flex; - justify-content: space-between; - align-items: center; - padding-left: 40px; - padding-right: 40px; } .hero_text { @@ -235,13 +229,7 @@ border-radius: 2px; } -.recent_container { - display: flex; - flex-direction: column; - width: 100%; - height: 237px; - margin-top: 30px; -} + .recent_title { display: flex; diff --git a/components/Home_Banner.tsx b/components/Home_Banner.tsx index 15bcec9..b7406c0 100644 --- a/components/Home_Banner.tsx +++ b/components/Home_Banner.tsx @@ -2,19 +2,21 @@ import React from "react"; export const Home_Banner: React.FC = () => { return ( -
-
-

Bring Your Story to Life

-

+

+
+

Bring Your Story to Life

+

Start creating your own ebook today — share your voice, inspire readers, and publish to the world in just a few clicks.

- +
-
-
-
-
+
+
+
+
); diff --git a/components/Recent_Card.tsx b/components/Recent_Card.tsx index 2260e0c..dd2e430 100644 --- a/components/Recent_Card.tsx +++ b/components/Recent_Card.tsx @@ -1,64 +1,33 @@ -import React, { forwardRef } from "react"; import Image from "next/image"; +import React from "react"; -export interface Recent_CardProps { +interface RecentCardProps { image: string; title: string; tag: string; description: string; - // Add additional props for event handlers - onClick?: React.MouseEventHandler; - onTouchStart?: React.TouchEventHandler; - onTouchEnd?: React.TouchEventHandler; - onTouchMove?: React.TouchEventHandler; } -const Recent_Card = forwardRef(({ - image, - title, - tag, - description, - onClick, - onTouchStart, - onTouchEnd, - onTouchMove, - ...props -}, ref) => { +const Recent_Card: React.FC = ({ image, title, tag, description }) => { return ( -
- {/* Image container with consistent aspect ratio */} -
+
+
{title} -
- - {tag} - -
-
- - {/* Content section */} -
-

{title}

-

{description}

+

+ {title} +

+

+ {tag} {description} +

); -}); - -Recent_Card.displayName = "Recent_Card"; +}; export default Recent_Card; \ No newline at end of file diff --git a/components/Recent_Creation.tsx b/components/Recent_Creation.tsx index 236c93d..66c3df7 100644 --- a/components/Recent_Creation.tsx +++ b/components/Recent_Creation.tsx @@ -1,4 +1,3 @@ -'use client' import React from "react"; import { FaSlidersH } from "react-icons/fa"; import Recent_Card from "./Recent_Card"; @@ -9,36 +8,34 @@ import { ContextMenuTrigger, } from "@/components/ui/context-menu" import Link from "next/link"; -import { useContextMenuTriggers } from "@/hooks/useContextMenuTriggers"; const Recent_Creation: React.FC = () => { - // Use our custom hook for the first card with context menu - const { handlers } = useContextMenuTriggers({ - longPressDelay: 500, // 500ms for long press - doubleClickDelay: 300 // 300ms for double click detection - }); - return ( -
-
-

Recent creations

- +
+
+

Recent creations

+
-
+ +
- +
+ +
- View as Reader - Continue editing + + View as Reader + + + Continue editing + @@ -48,18 +45,21 @@ const Recent_Creation: React.FC = () => { tag="Ebook" description="Edited 5 hours ago" /> + + + {
); -}; +} -export default Recent_Creation; +export default Recent_Creation; \ No newline at end of file