diff --git a/app/creator/reader/page.tsx b/app/creator/reader/page.tsx index 7002262..2109a6b 100644 --- a/app/creator/reader/page.tsx +++ b/app/creator/reader/page.tsx @@ -63,7 +63,6 @@ export default function Reader() { content: ( <> -

BRUTAL

"Wade Harper! What is up, old friend! It's been too long, @@ -94,7 +93,6 @@ export default function Reader() { videoSrc: "/videos/background2.mp4", content: ( <> -

BRUTAL

Man, yes! Didn't I tell you not to question this man! I knew diff --git a/app/globals.css b/app/globals.css index fb6d07d..6125d0c 100644 --- a/app/globals.css +++ b/app/globals.css @@ -130,8 +130,6 @@ background-size: cover; background-position: center center; background-blend-mode: multiply; - height: 170px; - width: 1045px; border-radius: 10px; padding: 8px; display: flex; @@ -165,23 +163,7 @@ font-family: Arial, Helvetica, sans-serif; } -.hero_img { - background-color: #010313D9; - background-image: url("/images/89f1cacd4041e59eb162ffcb0f8080dc179fe415.png"); - background-repeat: no-repeat; - background-size: cover; - background-position: center center; - background-blend-mode: multiply; - height: 170px; - width: 100%; - border-radius: 10px; - padding: 8px; - display: flex; - justify-content: space-between; - align-items: center; - padding-left: 40px; - padding-right: 40px; -} + .hero_text { display: flex; diff --git a/app/marketplace/advertisers/page.tsx b/app/marketplace/advertisers/page.tsx index 31d331a..eb62ac0 100644 --- a/app/marketplace/advertisers/page.tsx +++ b/app/marketplace/advertisers/page.tsx @@ -31,57 +31,74 @@ const Page: React.FC = () => { const [selectedCategory, setSelectedCategory] = useState( categories[0] ); + const handleCategoryClick = (category: string) => { setSelectedCategory(category); }; + return ( -

-
- advertizers -
-
-
- {categories.map((category) => ( - - ))} +
+ {/* Banner - responsive width */} +
+
+ advertizers
-
- {images.map((image, index) => ( -
- advertizers - + + {/* Categories - scrollable on mobile */} +
+
+
+ {categories.map((category) => ( + + ))}
- ))} +
+
+ + {/* Image grid - responsive columns */} +
+
+ {images.map((image, index) => ( +
+
+ {`advertizers-${index}`} +
+ +
+ ))} +
); }; -export default Page; +export default Page; \ No newline at end of file diff --git a/components/ContextMenuExample.tsx b/components/ContextMenuExample.tsx new file mode 100644 index 0000000..947554d --- /dev/null +++ b/components/ContextMenuExample.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import { + ContextMenu, + ContextMenuContent, + ContextMenuItem, + ContextMenuTrigger, +} from "@/components/ui/context-menu"; +import { useContextMenuTriggers } from "@/hooks/useContextMenuTriggers"; + +const ContextMenuExample: React.FC = () => { + const { handlers } = useContextMenuTriggers({ + longPressDelay: 500, // 500ms for long press + doubleClickDelay: 300 // 300ms for double click detection + }); + + return ( +
+

Context Menu Example

+

+ This component demonstrates how to use the context menu with: +

+
    +
  • Right-click (desktop)
    • +
  • Long press (mobile - 500ms)
    • +
  • Double click (mobile and desktop)
    • +
+ +
+ + +
+

+ Try right-click, long press, or double click me! +

+

+ Works on both desktop and mobile devices +

+
+ + + Option 1 + Option 2 + Option 3 + + +
+
+ ); +}; + +export default ContextMenuExample; diff --git a/components/Home_Banner.tsx b/components/Home_Banner.tsx index ed7c7a3..15bcec9 100644 --- a/components/Home_Banner.tsx +++ b/components/Home_Banner.tsx @@ -2,20 +2,20 @@ 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.

- +
-
-
-
+
+
+
); -}; +}; \ No newline at end of file diff --git a/components/Recent_Card.tsx b/components/Recent_Card.tsx index 97e58d9..2260e0c 100644 --- a/components/Recent_Card.tsx +++ b/components/Recent_Card.tsx @@ -1,31 +1,64 @@ +import React, { forwardRef } from "react"; import Image from "next/image"; -import React from "react"; -interface RecentCardProps { +export interface Recent_CardProps { 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: React.FC = ({ image, title, tag, description }) => { +const Recent_Card = forwardRef(({ + image, + title, + tag, + description, + onClick, + onTouchStart, + onTouchEnd, + onTouchMove, + ...props +}, ref) => { return ( -
-
+
+ {/* Image container with consistent aspect ratio */} +
image +
+ + {tag} + +
+
+ + {/* Content section */} +
+

{title}

+

{description}

-

{title}

-

- {tag} {description} -

); -}; +}); -export default Recent_Card; +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 85fb620..236c93d 100644 --- a/components/Recent_Creation.tsx +++ b/components/Recent_Creation.tsx @@ -1,3 +1,4 @@ +'use client' import React from "react"; import { FaSlidersH } from "react-icons/fa"; import Recent_Card from "./Recent_Card"; @@ -8,17 +9,22 @@ 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

-
+
{ title="Good morning Gabe Hager!" tag="Ebook" description="Edited 13 mins ago" + // Add our event handlers for mobile support + {...handlers} /> diff --git a/components/cards/HoverCards.tsx b/components/cards/HoverCards.tsx index d2f5202..fef6cb0 100644 --- a/components/cards/HoverCards.tsx +++ b/components/cards/HoverCards.tsx @@ -29,7 +29,7 @@ export default function HoverCards({ return ( -

{triggerText}

+ {triggerText}
@@ -65,4 +65,4 @@ export default function HoverCards({ ) -} \ No newline at end of file +} diff --git a/components/custom/Recent_Design.tsx b/components/custom/Recent_Design.tsx index d6d9962..c0b8d86 100644 --- a/components/custom/Recent_Design.tsx +++ b/components/custom/Recent_Design.tsx @@ -73,7 +73,7 @@ export default function RecentDesign() { {/* Action Buttons */} -
+ {/*
-
+
*/}
))}
diff --git a/hooks/useContextMenuTriggers.ts b/hooks/useContextMenuTriggers.ts new file mode 100644 index 0000000..322a270 --- /dev/null +++ b/hooks/useContextMenuTriggers.ts @@ -0,0 +1,95 @@ +'use client' + +import { useRef, useCallback, useState } from 'react'; + +interface UseContextMenuTriggersProps { + longPressDelay?: number; + doubleClickDelay?: number; +} + +export const useContextMenuTriggers = ({ + longPressDelay = 500, // Default long press delay in ms + doubleClickDelay = 300, // Default double click delay in ms +}: UseContextMenuTriggersProps = {}) => { + const [isLongPressing, setIsLongPressing] = useState(false); + const longPressTimerRef = useRef(null); + const lastClickTimeRef = useRef(0); + const targetRef = useRef(null); + + // Function to simulate a right-click event + const simulateRightClick = useCallback((element: HTMLElement) => { + // Create and dispatch a custom contextmenu event + const contextMenuEvent = new MouseEvent('contextmenu', { + bubbles: true, + cancelable: true, + clientX: element.getBoundingClientRect().left + element.offsetWidth / 2, + clientY: element.getBoundingClientRect().top + element.offsetHeight / 2, + }); + + element.dispatchEvent(contextMenuEvent); + }, []); + + // Handle touch start (for long press) + const handleTouchStart = useCallback((e: React.TouchEvent) => { + if (e.touches.length === 1) { + const element = e.currentTarget as HTMLElement; + targetRef.current = element; + + // Clear any existing timer + if (longPressTimerRef.current) { + clearTimeout(longPressTimerRef.current); + } + + setIsLongPressing(true); + + // Start a timer for long press + longPressTimerRef.current = setTimeout(() => { + if (isLongPressing && targetRef.current) { + simulateRightClick(targetRef.current); + } + }, longPressDelay); + } + }, [longPressDelay, isLongPressing, simulateRightClick]); + + // Handle touch end (cancel long press) + const handleTouchEnd = useCallback(() => { + if (longPressTimerRef.current) { + clearTimeout(longPressTimerRef.current); + } + setIsLongPressing(false); + }, []); + + // Handle touch move (cancel long press if moving) + const handleTouchMove = useCallback(() => { + if (longPressTimerRef.current) { + clearTimeout(longPressTimerRef.current); + } + setIsLongPressing(false); + }, []); + + // Handle double click + const handleClick = useCallback((e: React.MouseEvent) => { + const currentTime = new Date().getTime(); + const element = e.currentTarget as HTMLElement; + + // Check if this is a double click + if (currentTime - lastClickTimeRef.current < doubleClickDelay) { + // Double click detected + simulateRightClick(element); + lastClickTimeRef.current = 0; // Reset to prevent triple-click issues + } else { + // First click + lastClickTimeRef.current = currentTime; + } + }, [doubleClickDelay, simulateRightClick]); + + return { + handlers: { + onTouchStart: handleTouchStart, + onTouchEnd: handleTouchEnd, + onTouchMove: handleTouchMove, + onClick: handleClick, + }, + simulateRightClick, + }; +};