basic popover component

lukedigiovanna · May 1, 2024 · 10adf96 · 10adf96
1 parent 3f18d72
commit 10adf96
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/client/src/components/GameView.tsx b/client/src/components/GameView.tsx
@@ -12,6 +12,7 @@ import global from "../global";
 import ArticleActionBar from "./ArticleActionBar";
 import { Player } from "@shared/models";
 import { Client } from "../Client";
+import Popover from "./Popover";
 
 const GameView: Component<GameProperty> = (props: GameProperty) => {
     console.log("Rerendering GameView");
@@ -24,21 +25,29 @@ const GameView: Component<GameProperty> = (props: GameProperty) => {
 
     const ourIndex = () => game().players.findIndex(value => value.clientID === clientID);
 
+    const [test, setTest] = createSignal(true);
+
     return <>
+        <Popover visible={test()} close={() => {setTest(false)}}>
+            hi bitch
+        </Popover>
+
+
         <GameInfoBar game={game()} />
 
+
         <div class="flex flex-col sm:flex-row">
             <PlayerList game={game()} />
 
             <div class="sm:ml-4 flex flex-col w-full space-y-4">
                 {
                     game().inRound ?
                     <>
-                        <div class="border-gray-300 border shadow w-full h-[35vh] p-4 rounded text-center">
+                        <div class="border-gray-300 border shadow w-full h-fit p-4 rounded text-center">
                             <p class="text-gray-500 italic mt-10">
                                 The article title is
                             </p>
-                            <h1 class="font-[Libertine] text-[3rem] font-bold">
+                            <h1 class="font-[Libertine] text-[3rem] font-bold mb-10">
                                 {currentArticleTitle()}
                             </h1>
                         </div>

diff --git a/client/src/components/Popover.tsx b/client/src/components/Popover.tsx
@@ -0,0 +1,24 @@
+import { Component, JSX } from "solid-js";
+
+interface PopoverProps {
+    visible: boolean;
+    close: () => void;
+    children?: JSX.Element;
+}
+
+const Popover: Component<PopoverProps> = (props: PopoverProps) => {
+    const visible = () => props.visible;
+
+    return (
+        <div class={`${!visible() && "hidden"} absolute left-0 top-0 w-[100vw] h-[100vh] flex flex-row justify-center items-center`}>
+            <div class="absolute bg-black opacity-50 w-full h-full left-0 top-0 z-40" onClick={props.close}>
+
+            </div>
+            <div class="rounded bg-white w-[75vw] max-w-96 h-[40vh] z-50">
+                {props.children}
+            </div>
+        </div>
+    )
+}
+
+export default Popover;