Update: Add advertisement

GunmaRamens · Nov 2, 2023 · f1fd9a6 · f1fd9a6
1 parent 888c78d
commit f1fd9a6
Showing 1 changed file with 19 additions and 4 deletions.
diff --git a/src/popup/components/Header.tsx b/src/popup/components/Header.tsx
@@ -1,6 +1,7 @@
 import "@/styles/gaming.scss";
 
 import { DetailedHTMLProps } from "react";
+import { Collapse } from "react-daisyui";
 
 type HeaderProps = DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
 
@@ -11,10 +12,24 @@ export default function Header(props: HeaderProps) {
                 <p className="rainbow-text text-2xl">Gaming Gunma University</p>
             </div>
 
-            <div className="my-4">
-                <p>荒牧祭で「長谷川とら」で出店します。</p>
-                <p>「ゲーミング群馬大学入れました」で割引します。</p>
-            </div>
+            <Advertisement />
         </header>
     );
 }
+
+function Advertisement() {
+    return (
+        <>
+            <Collapse checkbox icon="arrow" className="my-5 bg-neutral-focus">
+                <Collapse.Title className="flex text-lg">
+                    <span className="rainbow-text font-serif italic">NEW</span>
+                    <span className="grow text-center">荒牧祭について</span>
+                </Collapse.Title>
+                <Collapse.Content>
+                    <p>荒牧祭で「長谷川とら」で出店します。</p>
+                    <p>「ゲーミング群馬大学入れました」で割引します。</p>
+                </Collapse.Content>
+            </Collapse>
+        </>
+    );
+}