From df0cfcfc5d52756617d8e3e65c8f24a5ad6d41f8 Mon Sep 17 00:00:00 2001
From: AVGVSTVS96 <122117267+AVGVSTVS96@users.noreply.github.com>
Date: Sat, 18 May 2024 11:02:46 +0530
Subject: [PATCH] Delete unused components, move to `ComponentArchive` repo

---
 src/components/BlogIndex.astro     | 35 ------------
 src/components/DropdownMenu.astro  | 74 -------------------------
 src/components/NavBar.astro        | 45 ---------------
 src/components/ThemeSwitcher.astro | 88 ------------------------------
 src/components/ThemeToggle.astro   | 84 ----------------------------
 5 files changed, 326 deletions(-)
 delete mode 100644 src/components/BlogIndex.astro
 delete mode 100644 src/components/DropdownMenu.astro
 delete mode 100644 src/components/NavBar.astro
 delete mode 100644 src/components/ThemeSwitcher.astro
 delete mode 100644 src/components/ThemeToggle.astro

diff --git a/src/components/BlogIndex.astro b/src/components/BlogIndex.astro
deleted file mode 100644
index f60fc928..00000000
--- a/src/components/BlogIndex.astro
+++ /dev/null
@@ -1,35 +0,0 @@
----
-import { formatDate } from '@utils/formatDate';
-import { sortedBlogPosts } from '@utils/getSortedPosts';
-
-const { class: className } = Astro.props;
-
-let latestPosts = Astro.props.postCount
-  ? sortedBlogPosts.slice(0, Astro.props.postCount)
-  : sortedBlogPosts;
-
-interface Props {
-  postCount?: number;
-  class?: string;
-}
----
-
-<ul class={`list-none pl-0 ${className}`}>
-  {
-    latestPosts.map((post) => (
-      <li class="grid grid-cols-1 border-t pt-2 pb-8 px-2.5 sm:grid-cols-3">
-        <div class="col-span-1 text-muted-foreground/80">
-          {formatDate(post.data.pubDate)}
-        </div>
-        <div class="col-span-2 sm:text-right">
-          <a
-            href={`/posts/${post.slug}/`}
-            aria-label={`Link to blog post: ${post.data.title}`}
-            class="block text-balance text-lg font-[500] text-foreground hover:text-muted-foreground/80">
-            {post.data.title}
-          </a>
-        </div>
-      </li>
-    ))
-  }
-</ul>
diff --git a/src/components/DropdownMenu.astro b/src/components/DropdownMenu.astro
deleted file mode 100644
index 0c548cfe..00000000
--- a/src/components/DropdownMenu.astro
+++ /dev/null
@@ -1,74 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types';
-import Button from './Button.astro';
-
-interface Link {
-  name: string;
-  href: string;
-}
-
-interface Props extends HTMLAttributes<'div'> {
-  name: string;
-  links: Link[];
-  showCaret: boolean;
-  icon: boolean;
-}
-
-const {
-  name = 'Dropdown',
-  links = [],
-  showCaret = false,
-  icon = false,
-  ...attrs
-} = Astro.props;
----
-
-<div class="dropdown relative" {...attrs}>
-  <Button
-    menu={true}
-    name={name}
-    class="dropdown-button"
-    showCaret={showCaret}
-    icon={icon}>
-    <slot name="icon" slot="icon" />
-  </Button>
-  <div
-    class:list={[
-      `dropdown-content absolute mt-1 hidden text-balance rounded-md border bg-primary-50 p-[0.5px] dark:bg-background`,
-      icon ? '' : 'w-full',
-    ]}>
-    {
-      links.map((link) => (
-        <a
-          href={link.href}
-          class="m-1 block rounded-sm px-2 py-2 text-sm text-foreground/75 transition-colors duration-200 hover:bg-primary-200/70 hover:text-foreground dark:hover:bg-accent">
-          {link.name}
-        </a>
-      ))
-    }
-  </div>
-</div>
-
-<script>
-  const dropdowns = document.querySelectorAll('.dropdown');
-
-  dropdowns.forEach((dropdown) => {
-    const button = dropdown.querySelector('.dropdown-button');
-    const content = dropdown.querySelector('.dropdown-content');
-
-    if (button && content) {
-      button.addEventListener('click', (event) => {
-        content.classList.toggle('hidden');
-        button.classList.toggle('dropdown-active');
-        event.stopPropagation();
-      });
-
-      document.addEventListener('click', (event) => {
-        if (!dropdown.contains(event.target as Node)) {
-          button.classList.remove('dropdown-active');
-          content.classList.add('hidden');
-        }
-      });
-    }
-  });
-</script>
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
deleted file mode 100644
index 420acd66..00000000
--- a/src/components/NavBar.astro
+++ /dev/null
@@ -1,45 +0,0 @@
----
-import Button from './Button.astro';
-import DropdownMenu from './DropdownMenu.astro';
-import ThemeToggle from './ThemeToggle.astro';
-import ThemeSwitcher from './ThemeSwitcher.astro';
-import { CommandMenu } from '@components/CommandMenu';
-import { SideMenu } from '@components/SideMenu';
-import Logo from './Logo.astro';
-import { projectLinks } from './navLinks';
-import { sortedBlogPosts } from '@utils/getSortedPosts';
----
-
-<div
-  class="navbar-container sticky top-0 z-10 mb-8 w-full border-b border-border bg-background">
-  <div
-    class="h-1 w-full bg-gradient-to-r from-accent-300 via-accent-500 to-accent-400">
-  </div>
-  <div
-    class="button-container flex items-center justify-between px-4 py-2 text-dark dark:text-light sm:px-6 md:px-10 xl:px-14">
-    <span class="flex items-center">
-      <Logo class="mr-4" />
-      <CommandMenu client:load buttonStyles="h-8 pr-1" posts={sortedBlogPosts} />
-    </span>
-    <div class="button-theme-container flex items-center gap-1">
-      <div class="gap-1 text-[15px] sm:flex">
-        <div class="hidden items-center gap-1 lg:flex">
-          <Button name="Home" link="/" tabindex="-1" />
-          <Button name="About" link="/about" tabindex="-1" />
-          <Button name="Blog" link="/blog" tabindex="-1" />
-          <DropdownMenu
-            name="Projects"
-            links={projectLinks}
-            showCaret={true}
-            icon={false}
-          />
-        </div>
-        <ThemeSwitcher />
-      </div>
-      <ThemeToggle />
-      <div class="flex lg:hidden">
-        <SideMenu client:load />
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/components/ThemeSwitcher.astro b/src/components/ThemeSwitcher.astro
deleted file mode 100644
index c84ad458..00000000
--- a/src/components/ThemeSwitcher.astro
+++ /dev/null
@@ -1,88 +0,0 @@
----
-import DropdownMenu from './DropdownMenu.astro';
-import type { HTMLAttributes } from 'astro/types';
-
-type Props = HTMLAttributes<'div'>;
-
-const themeOptions = [
-  { name: 'Slate', href: '#slate' },
-  { name: 'Sky', href: '#sky' },
-  { name: 'Cyan', href: '#cyan' },
-  { name: 'Teal', href: '#teal' },
-  { name: 'Emerald', href: '#emerald' },
-  { name: 'Violet', href: '#violet' },
-  { name: 'Fuchsia', href: '#fuchsia' },
-  { name: 'Amber', href: '#amber' },
-];
----
-
-<div class="theme-switcher">
-  <DropdownMenu name="" links={themeOptions} showCaret={true} icon={false}>
-    <slot name="icon" slot="icon">
-      <div
-        class="rainbow-ring mx-0.5 before:ring-[0.7px] before:ring-primary-100 before:dark:ring-primary-950">
-      </div>
-    </slot>
-  </DropdownMenu>
-</div>
-
-<script is:inline>
-  const changeTheme = (newTheme) => {
-    document.documentElement.setAttribute('data-theme', newTheme);
-    localStorage.setItem('themeSwitcher', newTheme);
-  };
-
-  const currentTheme = localStorage.getItem('themeSwitcher') || 'sky';
-  changeTheme(currentTheme);
-
-  document.addEventListener('DOMContentLoaded', () => {
-    document
-      .querySelectorAll('.theme-switcher .dropdown-content a')
-      .forEach((link) => {
-        link.addEventListener('click', (e) => {
-          e.preventDefault();
-          const theme = e.target.getAttribute('href').substring(1);
-          changeTheme(theme);
-        });
-      });
-  });
-</script>
-<style is:global>
-  :root {
-    --ring-size: 25px;
-    --rainbow-width: 19px;
-  }
-
-  .rainbow-ring {
-    display: inline-block;
-    width: var(--ring-size);
-    height: var(--ring-size);
-    border-radius: 50%;
-    background: conic-gradient(
-      lch(54.29% 106.84 40.86),
-      lch(97.61% 94.71 99.57),
-      lch(87.82% 113.33 134.38),
-      lch(90.67% 52.82 196.45),
-      lch(29.57% 131.2 301.36),
-      lch(60.17% 111.4 327.11),
-      lch(54.29% 106.84 40.86)
-    );
-    position: relative;
-  }
-
-  .rainbow-ring::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: var(--rainbow-width);
-    height: var(--rainbow-width);
-    border-radius: 50%;
-    background: linear-gradient(
-      to bottom left,
-      var(--accent-300),
-      var(--accent-600)
-    );
-  }
-</style>
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
deleted file mode 100644
index 1b159845..00000000
--- a/src/components/ThemeToggle.astro
+++ /dev/null
@@ -1,84 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types';
-
-type Props = HTMLAttributes<'button'>;
-
-const { ...attrs } = Astro.props;
----
-
-<button
-  {...attrs}
-  id="themeToggle"
-  aria-label="Dark Mode Toggle"
-  class="rounded-lg px-3 py-1">
-  <svg width="26px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path
-      class="sun"
-      fill-rule="evenodd"
-      d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"
-    ></path>
-    <path
-      class="moon"
-      fill-rule="evenodd"
-      d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
-    ></path>
-  </svg>
-</button>
-
-<style>
-  #themeToggle {
-    border: 0;
-    background: none;
-  }
-  .sun {
-    fill: rgba(0, 0, 0, 0.7);
-  }
-  .moon {
-    fill: transparent;
-  }
-
-  :global(.dark) .sun {
-    fill: transparent;
-  }
-  :global(.dark) .moon {
-    fill: rgb(250, 250, 250, 0.8);
-  }
-</style>
-
-<script is:inline>
-  function disableTransitions() {
-    const css = document.createElement('style');
-    css.textContent = `
-      * {
-        -webkit-transition: none !important;
-        -moz-transition: none !important;
-        -o-transition: none !important;
-        -ms-transition: none !important;
-        transition: none !important;
-      }
-    `;
-    document.head.appendChild(css);
-    requestAnimationFrame(() => {
-      document.head.removeChild(css);
-    });
-  }
-
-  function toggleTheme() {
-    const currentTheme =
-      localStorage.getItem('themeToggle') ||
-      (window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light');
-    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-
-    disableTransitions();
-
-    document.documentElement.classList.toggle('dark', newTheme === 'dark');
-    localStorage.setItem('themeToggle', newTheme);
-  }
-
-  document.addEventListener('DOMContentLoaded', () => {
-    const themeToggleButton = document.getElementById('themeToggle');
-    themeToggleButton?.addEventListener('click', toggleTheme);
-  });
-</script>