TheShadowEevee/WebsiteButAgainTheSequelToTheTrilogy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add components for development to index

Browse source
This commit is contained in:
Michael 2024-12-20 16:38:31 -06:00
parent 4cdfebd5b3
commit 4f92e5c30b
Signed by: TheShadowEevee
GPG key ID: 7A8AA92B3BAFAB75
1 changed files with 98 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
src/pages/index.astro
View file

@ -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>