From 4f92e5c30b2e1ee2e15c318a2312e1f83d584509 Mon Sep 17 00:00:00 2001
From: TheShadowEevee <theshadoweeveeyt@gmail.com>
Date: Fri, 20 Dec 2024 16:38:31 -0600
Subject: [PATCH] Add components for development to index

---
 src/pages/index.astro | 113 ++++++++++++++++++++++++++++++++++++------
 1 file changed, 98 insertions(+), 15 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index e12a14f..bbf6dec 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,8 +1,9 @@
 ---
-import { ModeToggle } from '@/components/ModeToggle';
-import Layout from '../layouts/Layout.astro';
-import '@/styles/globals.css';
-
+import Layout from "../layouts/Layout.astro";
+import "@/styles/globals.css";
+import { Button } from "@/components/ui/button";
+import { AlertCircle, ChevronRight } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 
 // Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
 // Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
@@ -11,23 +12,105 @@ import '@/styles/globals.css';
 <!-- Theme Change Script (See @/app/dashboard/page for button) -->
 <script is:inline>
 	const getThemePreference = () => {
-		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
-			return localStorage.getItem('theme');
+		if (
+			typeof localStorage !== "undefined" &&
+			localStorage.getItem("theme")
+		) {
+			return localStorage.getItem("theme");
 		}
-		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+		return window.matchMedia("(prefers-color-scheme: dark)").matches
+			? "dark"
+			: "light";
 	};
-	const isDark = getThemePreference() === 'dark';
-	document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
- 
-	if (typeof localStorage !== 'undefined') {
+	const isDark = getThemePreference() === "dark";
+	document.documentElement.classList[isDark ? "add" : "remove"]("dark");
+
+	if (typeof localStorage !== "undefined") {
 		const observer = new MutationObserver(() => {
-			const isDark = document.documentElement.classList.contains('dark');
-			localStorage.setItem('theme', isDark ? 'dark' : 'light');
+			const isDark = document.documentElement.classList.contains("dark");
+			localStorage.setItem("theme", isDark ? "dark" : "light");
+		});
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["class"],
 		});
-		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
 	}
 </script>
 
 <Layout>
-	
+	<Alert variant="destructive">
+		<AlertCircle className="h-4 w-4" />
+		<AlertTitle>Page in Development</AlertTitle>
+		<AlertDescription>
+		  This page is in development.
+		</AlertDescription>
+	</Alert>
+	<div class="some-page-wrapper">
+		<div class="row">
+			<div class="column blue-column">
+				<div>
+					<h1>Text1</h1>
+				</div>
+				<div>
+					<h2>Text2</h2>
+				</div>
+			</div>
+			<div class="column green-column">
+				<div>
+					<h1>Text1</h1>
+				</div>
+				<div>
+					<h2>Text2</h2>
+				</div>
+			</div>
+			<div id="nav-cards" class="column purple-column">
+				<div>
+					<Button variant="outline" className="mt-auto">
+						<div>
+							Test Button for Navigation
+							<br />
+							Test Button Second Line
+						</div>
+						<ChevronRight />
+					</Button>
+				</div>
+				<div>
+					<h2>Text2</h2>
+				</div>
+			</div>
+		</div>
+	</div>
 </Layout>
+
+<style>
+	.some-page-wrapper {
+		margin: 15px;
+		background-color: red;
+	}
+
+	.row {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		width: 100%;
+	}
+
+	.column {
+		display: flex;
+		flex-direction: column;
+		flex-basis: 100%;
+		flex: 1;
+	}
+
+	.blue-column {
+		background-color: blue;
+	}
+
+	.green-column {
+		background-color: green;
+	}
+
+	.purple-column {
+		background-color: purple;
+	}
+</style>