From 3d4b740e5a512db8fbdd934af2fbc9585fa00f0f Mon Sep 17 00:00:00 2001 From: polwex Date: Thu, 15 May 2025 18:47:59 +0700 Subject: thanks gemini, very pretty --- src/pages/test/client-modal.tsx | 59 ++++++ src/pages/test/index.tsx | 34 +++ src/pages/test/product-details-server.tsx | 340 ++++++++++++++++++++++++++++++ src/pages/test/trigger-modal-button.tsx | 37 ++++ 4 files changed, 470 insertions(+) create mode 100644 src/pages/test/client-modal.tsx create mode 100644 src/pages/test/index.tsx create mode 100644 src/pages/test/product-details-server.tsx create mode 100644 src/pages/test/trigger-modal-button.tsx (limited to 'src/pages') diff --git a/src/pages/test/client-modal.tsx b/src/pages/test/client-modal.tsx new file mode 100644 index 0000000..293e28c --- /dev/null +++ b/src/pages/test/client-modal.tsx @@ -0,0 +1,59 @@ +"use client"; + +import { useState, ReactNode, useEffect } from "react"; + +interface ClientModalProps { + isOpen: boolean; + onClose: () => void; + children: ReactNode; // This will receive the Server Component's output + title?: string; +} + +export default function ClientModal({ + isOpen, + onClose, + children, + title = "Modal", +}: ClientModalProps) { + // Optional: Prevent body scroll when modal is open + useEffect(() => { + if (isOpen) { + document.body.style.overflow = "hidden"; + } else { + document.body.style.overflow = "unset"; + } + return () => { + document.body.style.overflow = "unset"; + }; + }, [isOpen]); + + if (!isOpen) { + return null; + } + + return ( +
+
e.stopPropagation()} // Prevent click from closing modal if clicking inside content + > +
+

{title}

+ +
+
+ {children} {/* Server Component content will be rendered here */} +
+
+
+ ); +} diff --git a/src/pages/test/index.tsx b/src/pages/test/index.tsx new file mode 100644 index 0000000..35ce5db --- /dev/null +++ b/src/pages/test/index.tsx @@ -0,0 +1,34 @@ +// This is a Server Component by default +import ProductDetailsServer from "./product-details-server"; +import TriggerModalButton from "./trigger-modal-button"; // We'll make this a client component to manage state + +export default function SomePage() { + const productIdForModal = "123"; // Or get this dynamically + + return ( +
+

+ Modal with Server Component Content +

+

+ This page demonstrates opening a modal whose content is rendered by a + Server Component. The modal shell (open/close logic) is a Client + Component. +

+ + {/* + The TriggerModalButton will manage the modal's open/close state. + It will receive the Server Component as a child to pass to ClientModal. + */} + + + + +
+

Other content on the page...

+
+
+ ); +} diff --git a/src/pages/test/product-details-server.tsx b/src/pages/test/product-details-server.tsx new file mode 100644 index 0000000..552ff21 --- /dev/null +++ b/src/pages/test/product-details-server.tsx @@ -0,0 +1,340 @@ +// This is a Server Component +import React from "react"; +import db from "@/lib/db"; +import { + Card, + CardHeader, + CardDescription, + CardContent, + CardFooter, + CardTitle, +} from "@/components/ui/card"; +import { NLP } from "sortug-ai"; +import { + BookOpen, + Volume2, + Link as LinkIcon, + ChevronDown, + ChevronUp, + Search, + Info, + MessageSquareQuote, + Tags, + ListTree, + Lightbulb, +} from "lucide-react"; +import { + Example, + SubSense, + RelatedEntry, + Sense, + WordData, +} from "@/zoom/logic/types"; + +export default async function Wordd({ + word, + lang, +}: { + word: string; + lang: string; +}) { + const data = db.fetchWordBySpelling(word, "en"); + console.log({ data }); + + if (!data) return

oh...

; + return ( + + + +

{word}

+ + + + + + + {/* Senses */} +

+ Meanings & Definitions +

+ {data.senses.map((sense, index) => ( + + ))} + + + + ); + // return ( + //
+ //

{word}

+ //

${word.}

+ //

{word}

+ //

+ // Content rendered on the server at: {new Date().toLocaleTimeString()} + //

+ //
+ // ); +} + +// Helper component for IPA display +const IpaDisplay = ({ + ipaEntries, +}: { + ipaEntries: Array<{ ipa: string; tags?: string[] }>; +}) => { + if (!ipaEntries || ipaEntries.length === 0) return null; + return ( +
+ {ipaEntries.map((entry, index) => { + const tags = entry.tags ? entry.tags : []; + return ( + + {entry.ipa}{" "} + {tags.length > 0 && ( + ({tags.join(", ")}) + )} + + ); + })} + +
+ ); +}; + +// Component for displaying examples +const ExampleDisplay = ({ examples }: { examples: Example[] }) => { + if (!examples || examples.length === 0) return null; + return ( +
+
+ + Examples: +
+ +
+ ); +}; + +// Component for displaying related terms (synonyms, antonyms, etc.) +const RelatedTermsDisplay = ({ + terms, + type, +}: { + terms: RelatedEntry[] | undefined; + type: string; +}) => { + if (!terms || terms.length === 0) return null; + return ( +
+ + {type}:{" "} + + {terms.map((term, idx) => ( + + + {term.word} + + {term.source && ( + ({term.source}) + )} + {idx < terms.length - 1 && ", "} + + ))} +
+ ); +}; + +// Component for displaying a SubSense +const SubSenseDisplay = ({ + subSense, + subSenseNumber, +}: { + subSense: SubSense; + subSenseNumber: number; +}) => { + return ( +
+ {subSense.glosses.map((gloss, glossIdx) => ( +

+ + {subSenseNumber}.{glossIdx + 1} + {" "} + {gloss} +

+ ))} + {subSense.raw_glosses && + subSense.raw_glosses.length > 0 && + subSense.raw_glosses.join("") !== subSense.glosses.join("") && ( +

+ (Raw: {subSense.raw_glosses.join("; ")}) +

+ )} + + {subSense.categories && subSense.categories.length > 0 && ( +
+
+ + Categories: +
+
+ {subSense.categories.map((cat, idx) => ( + + {cat} + + ))} +
+
+ )} + + + + + {subSense.tags && subSense.tags.length > 0 && ( +
+
+ + Tags: +
+
+ {subSense.tags.map((tag, idx) => ( + + {tag} + + ))} +
+
+ )} + + {subSense.links && subSense.links.length > 0 && ( +
+ {subSense.links.map(([type, target], linkIdx) => ( + + {type} + + ))} +
+ )} +
+ ); +}; + +// Component for individual sense +const SenseCard = ({ + senseData, + senseNumber, +}: { + senseData: Sense; + senseNumber: number; +}) => { + return ( +
+
+

+ {senseNumber}. {senseData.pos} +

+
+ + {senseData.etymology && ( +
+ + Etymology + + + +

+ {senseData.etymology} +

+
+ )} + + {senseData.forms && senseData.forms.length > 0 && ( +
+

Forms:

+
+ {senseData.forms.map((form, idx) => ( + + {form.form}{" "} + {form.tags.length > 0 && `(${form.tags.join(", ")})`} + + ))} +
+
+ )} + + {senseData.senses.map((subSense, idx) => ( + + ))} + + {senseData.related && ( +
+

+ + Related Terms: +

+ + + + +
+ )} +
+ ); +}; diff --git a/src/pages/test/trigger-modal-button.tsx b/src/pages/test/trigger-modal-button.tsx new file mode 100644 index 0000000..eaa2dda --- /dev/null +++ b/src/pages/test/trigger-modal-button.tsx @@ -0,0 +1,37 @@ +"use client"; + +import { useState, ReactNode } from "react"; +import ClientModal from "./client-modal"; // The modal shell + +interface TriggerModalButtonProps { + children: ReactNode; // This will be the + buttonText?: string; + modalTitle?: string; +} + +export default function TriggerModalButton({ + children, + buttonText = "Open Product Details", + modalTitle, +}: TriggerModalButtonProps) { + const [isModalOpen, setIsModalOpen] = useState(false); + + return ( + <> + + + setIsModalOpen(false)} + title={modalTitle || ""} + > + {children} {/* Pass the Server Component content here */} + + + ); +} -- cgit v1.2.3