From 6de1fc8113628d376f970d01eafe178ab2836a43 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.com>
Date: Fri, 21 Jun 2024 02:41:23 -0400
Subject: [PATCH] Add components

---
 src/components/Dropdown.astro      | 161 +++++++++++++++++++++++++++++
 src/components/global/Footer.astro |   0
 src/components/global/Head.astro   |  24 +++++
 src/components/global/Header.astro |  99 ++++++++++++++++++
 4 files changed, 284 insertions(+)
 create mode 100644 src/components/Dropdown.astro
 create mode 100644 src/components/global/Footer.astro
 create mode 100644 src/components/global/Head.astro
 create mode 100644 src/components/global/Header.astro

diff --git a/src/components/Dropdown.astro b/src/components/Dropdown.astro
new file mode 100644
index 0000000..a928989
--- /dev/null
+++ b/src/components/Dropdown.astro
@@ -0,0 +1,161 @@
+---
+// Properties
+const {
+  Icon
+} = Astro.props
+
+// Icons
+import {
+    Menu,
+    Settings,
+    ProfileCircle,
+    CircleSpark,
+    Youtube,
+    OpenNewWindow,
+    ViewGrid,
+    Arcade,
+    InfoCircle,
+    PrivacyPolicy,
+    Code,
+    Language,
+    NavArrowLeft,
+    NavArrowRight,
+    List
+} from '@iconoir/vue'
+
+// Check URL
+if (Astro.url.pathname.startsWith('/watch')) {
+  var WatchPage = true
+} else {
+  var WatchPage = false
+}
+---
+
+<button class="dropdown-button" onclick="ToggleHeaderDropdown()"><Menu/></button>
+<div id="primary" class="header-dropdown">
+  <p>Options</p>
+  <a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()" style="justify-content: space-between;"><div><Language/> Language</div> <NavArrowRight/></a>
+  <a href=""><ProfileCircle/> Account</a>
+  <a href=""><Settings/> Settings</a>
+  <a href=""><List/> Instances</a>
+
+  <p>Hub</p>
+  <a href=""><ViewGrid/> Apps</a>
+  <a href=""><Arcade/> Games</a>
+
+  <p>Open in...</p>
+  <a href=""><CircleSpark/> Lite Mode</a>
+  <a href=""><Youtube/> YouTube</a>
+  <a href=""><OpenNewWindow/> Invidious</a>
+  <a href=""><OpenNewWindow/> Pipe</a>
+  <a href=""><OpenNewWindow/> Invidious</a>
+
+  <p>Other</p>
+  <a href=""><InfoCircle/> About</a>
+  <a href=""><PrivacyPolicy/> Privacy</a>
+  <a href=""><Code/> Source Code</a>
+</div>
+<div id="language" class="header-dropdown">
+  <p>Language</p>
+  <a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()"><NavArrowLeft/> Go Back</a>
+  <a href="">English</a>
+  <a href="">Spanish</a>
+  <a href="">Russian</a>
+  <a href="">Japanese</a>
+</div>
+
+<script is:inline>
+/*    
+@licstart  The following is the entire license notice for the 
+JavaScript code in this page.
+
+Copyright (C) 2024 SudoVanilla
+
+The JavaScript code in this page is free software: you can
+redistribute it and/or modify it under the terms of the GNU
+General Public License (GNU GPL) as published by the Free Software
+Foundation, either version 3 of the License, or (at your option)
+any later version.  The code is distributed WITHOUT ANY WARRANTY;
+without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
+
+As additional permission under GNU GPL version 3 section 7, you
+may distribute non-source (e.g., minimized or compacted) forms of
+that code without the copy of the GNU GPL normally required by
+section 4, provided you include this license notice and a URL
+through which recipients can access the Corresponding Source.   
+
+
+@licend  The above is the entire license notice
+for the JavaScript code in this page.
+*/
+function ToggleHeaderDropdown() {
+  var HeaderDropdown = document.querySelector(".header-dropdown#primary");
+  if (HeaderDropdown.style.display === "flex") {
+    HeaderDropdown.style.display = "none";
+  } else {
+    HeaderDropdown.style.display = "flex";
+  }
+}
+function ToggleHeaderLanguageDropdown() {
+  var HeaderLanguageDropdown = document.querySelector(".header-dropdown#language");
+  if (HeaderLanguageDropdown.style.display === "flex") {
+    HeaderLanguageDropdown.style.display = "none";
+  } else {
+    HeaderLanguageDropdown.style.display = "flex";
+  }
+}
+</script>
+
+<style lang="scss">
+.dropdown-button {
+  color: white;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  aspect-ratio: 1;
+  padding: 4px 6px;
+  &:hover {
+    background: rgba(255,255,255,0.1);
+  }
+  svg {
+    width: 18px;
+    pointer-events: none;
+  }
+}
+.header-dropdown {
+  display: none;
+  flex-direction: column;
+  position: absolute;
+  top: 70px;
+  right: 24px;
+  background: #202020;
+  border-radius: 12px;
+  gap: 6px;
+  padding: 12px 6px 8px 6px;
+  p {
+    margin: 0px 0px 0px 12px;
+    color: gray;
+    font-size: 12px;
+  }
+  a {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 14px;
+    text-decoration: none;
+    padding: 6px 12px !important;
+    aspect-ratio: inherit !important;
+    min-width: 200px;
+    border-radius: 6px;
+    &:hover {
+      background: rgba(255,255,255,0.1);
+    }
+    div {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/global/Footer.astro b/src/components/global/Footer.astro
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/global/Head.astro b/src/components/global/Head.astro
new file mode 100644
index 0000000..f707ca7
--- /dev/null
+++ b/src/components/global/Head.astro
@@ -0,0 +1,24 @@
+---
+// Properties
+const {
+    Title,
+    Description
+} = Astro.props
+---
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>{Title}</title>
+        <link href=/favicon.ico rel=icon>
+        <link rel="manifest" href="/manifest.json">
+
+        <meta charset="UTF-8">
+        <meta name="darkreader-lock"> 
+        <meta name="theme-color" content="#414161">
+        <meta http-equiv="content-language" content="en-us">
+        <meta name="viewport" content="width=device-1200px, initial-scale=1.0, shrink-to-fit=yes, viewport-fit=cover">
+        <meta content="▶▶ Poke - The privacy app of your dreams!" property=og:title>
+        <meta content="Poke is a free software YouTube front-end, search engine, translator, map app, and more!! Watch silly videos, search the internet, and do all of that and more anonymously in this all-in-one privacy app!!!" property="twitter:description">
+        <meta content="https://cdn.glitch.global/302c6ee0-629f-453b-9024-bad1f8d7be36/poke.png?v=1716216428745" property="og:image">
+        <meta content="summary_large_image" name="twitter:card" />
\ No newline at end of file
diff --git a/src/components/global/Header.astro b/src/components/global/Header.astro
new file mode 100644
index 0000000..fb129d6
--- /dev/null
+++ b/src/components/global/Header.astro
@@ -0,0 +1,99 @@
+---
+// Components
+import { Image } from 'astro:assets';
+import { actions } from "astro:actions";
+import Dropdown from '@components/Dropdown.astro'
+
+// Images
+import Poke from '@assets/poke-text.svg'
+
+// Icons
+import {
+    Server,
+    Gamepad,
+    Settings,
+    Search,
+    Language
+} from '@iconoir/vue'
+---
+
+<header>
+    <div class="header-content">
+        <div class="header-start">
+            <Image src={Poke} alt="Poke Logo" height={24} />
+        </div>
+        <div class="header-center">
+            <form>
+                <input type="text" placeholder="Search"/>
+                <button type="submit"><Search/></button>
+            </form>
+        </div>
+        <div class="header-end">
+            <Dropdown/>
+        </div>
+    </div>
+</header>
+
+<style lang="scss">
+header {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    background: #161616;
+    border-bottom: 2px #232323 solid;
+    .header-content {
+        display: flex;
+        justify-content: space-between;
+        padding: 12px 24px;
+        align-items: center;
+        margin: auto;
+        max-width: 1200px;
+        position: relative;
+        .header-center {
+            form {
+                display: flex;
+                align-items: center;
+                input {
+                    color: white;
+                    background: black;
+                    border: 2px #333 solid;
+                    border-right: 0px;
+                    border-radius: 3rem 0px 0px 3rem;
+                    padding: 6px 12px;
+                }
+                button {
+                    color: white;
+                    background: black;
+                    border: 2px #333 solid;
+                    border-left: 0px;
+                    border-radius: 0px 3rem 3rem 0px;
+                    padding: 1px 8px 0px 0px;
+                    cursor: var(--pointer-cursor);
+                    svg {
+                        width: 16px;
+                        pointer-events: none;
+                    }
+                }
+            }
+        }
+        .header-end {
+            display: flex;
+            gap: 6px;
+            a {
+                color: white;
+                border-radius: 6px;
+                aspect-ratio: 1;
+                padding: 4px 6px;
+                &:hover {
+                    background: rgba(255,255,255,0.1);
+                }
+                svg {
+                    width: 18px;
+                    pointer-events: none;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file