aljaz/hypergolic
1
0
Fork 0
mirror of https://github.com/aljazceru/hypergolic.git synced 2025-12-18 14:04:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

problem: layout and menu structure are repetative

Browse Source
This commit is contained in:
gsovereignty
2024-06-29 17:46:40 +08:00
parent dfffc8ca35
commit 146ab00d3d
8 changed files with 187 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Heading.svelte Normal file
View File

@@ -0,0 +1,9 @@
<script lang="ts">
export let title: string;
</script>
<div class="mb-4 flex items-center">
<h1 class="scroll-m-20 text-xl font-semibold tracking-tight md:text-3xl">
{title}
</h1>
</div>

1
src/components/Menu.svelte
View File

@@ -8,6 +8,7 @@
let iconClass = "h-5 w-5 md:h-4 md:w-4" let iconClass = "h-5 w-5 md:h-4 md:w-4"
let getClass = (menuItem:string) => { let getClass = (menuItem:string) => {
//todo: make this re-run any time our path changes
if ($page.url.pathname.includes(menuItem)) { if ($page.url.pathname.includes(menuItem)) {
return "flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary" return "flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary"
} else { } else {

220
src/layouts/SidePanelLayout.svelte
View File

@@ -1,118 +1,110 @@
<script lang="ts"> <script lang="ts">
import Bell from "lucide-svelte/icons/bell"; import Bell from 'lucide-svelte/icons/bell';
import CircleUser from "lucide-svelte/icons/circle-user"; import CircleUser from 'lucide-svelte/icons/circle-user';
import Menu from "lucide-svelte/icons/menu"; import Menu from 'lucide-svelte/icons/menu';
import Search from "lucide-svelte/icons/search"; import Search from 'lucide-svelte/icons/search';
import { Button } from "$lib/components/ui/button/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import * as Sheet from "$lib/components/ui/sheet/index.js";
import { Rocket } from "lucide-svelte";
import NewMenu from "../components/Menu.svelte";
import RocketPillCard from "../components/RocketPillCard.svelte";
import { base } from "$app/paths";
export let title = "" import { Button } from '$lib/components/ui/button/index.js';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
</script> import { Input } from '$lib/components/ui/input/index.js';
import * as Sheet from '$lib/components/ui/sheet/index.js';
<div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]"> import { Rocket } from 'lucide-svelte';
<div class="hidden border-r bg-muted/40 md:block"> import NewMenu from '../components/Menu.svelte';
<div class="flex h-full max-h-screen flex-col gap-2"> import RocketPillCard from '../components/RocketPillCard.svelte';
<div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6"> import { base } from '$app/paths';
<a href="{base}/" class="flex items-center gap-2 font-semibold">
<Rocket class="h-6 w-6" />
<span class="">Nostrocket LFG</span>
</a>
<Button variant="outline" size="icon" class="ml-auto h-8 w-8">
<Bell class="h-4 w-4" />
<span class="sr-only">Toggle notifications</span>
</Button>
</div>
<div class="flex-1">
<nav class="grid items-start px-2 text-sm font-medium lg:px-4">
<NewMenu />
</nav>
</div>
<div class="mt-auto p-4">
<RocketPillCard />
</div>
</div>
</div>
<div class="flex flex-col">
<header class="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
<Sheet.Root>
<Sheet.Trigger asChild let:builder>
<Button
variant="outline"
size="icon"
class="shrink-0 md:hidden"
builders={[builder]}
>
<Menu class="h-5 w-5" />
<span class="sr-only">Toggle navigation menu</span>
</Button>
</Sheet.Trigger>
<Sheet.Content side="left" class="flex flex-col">
<nav class="grid gap-2 text-lg font-medium">
<a href="##" class="flex items-center gap-2 text-lg font-semibold">
<Rocket class="h-6 w-6" />
<span>Nostrocket LFG</span>
</a>
<NewMenu />
</nav>
<div class="mt-auto">
<RocketPillCard />
</div>
</Sheet.Content>
export let title = '';
<div class="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert"> </script>
<span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">Alert</span>
<span class="font-semibold mr-2 text-left flex-auto">Nostrocket is so not ready yet, this is just a preview</span>
<div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
<div class="w-full flex-1"> <div class="hidden border-r bg-muted/40 md:block">
<form> <div class="flex h-full max-h-screen flex-col gap-2">
<div class="relative"> <div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
<Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" /> <a href="{base}/" class="flex items-center gap-2 font-semibold">
<Input <Rocket class="h-6 w-6" />
type="search" <span class="">Nostrocket LFG</span>
placeholder="Search Nostrocket..." </a>
class="w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3" <Button variant="outline" size="icon" class="ml-auto h-8 w-8">
/> <Bell class="h-4 w-4" />
</div> <span class="sr-only">Toggle notifications</span>
</form> </Button>
</div> </div>
<DropdownMenu.Root> <div class="flex-1">
<DropdownMenu.Trigger asChild let:builder> <nav class="grid items-start px-2 text-sm font-medium lg:px-4">
<Button <NewMenu />
builders={[builder]} </nav>
variant="secondary" </div>
size="icon" <div class="mt-auto p-4">
class="rounded-full" <RocketPillCard />
> </div>
<CircleUser class="h-5 w-5" /> </div>
<span class="sr-only">Toggle user menu</span> </div>
</Button> <div class="flex flex-col">
</DropdownMenu.Trigger> <header class="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
<DropdownMenu.Content align="end"> <Sheet.Root>
<DropdownMenu.Label>My Account</DropdownMenu.Label> <Sheet.Trigger asChild let:builder>
<DropdownMenu.Separator /> <Button variant="outline" size="icon" class="shrink-0 md:hidden" builders={[builder]}>
<DropdownMenu.Item>Settings</DropdownMenu.Item> <Menu class="h-5 w-5" />
<DropdownMenu.Item>Support</DropdownMenu.Item> <span class="sr-only">Toggle navigation menu</span>
<DropdownMenu.Separator /> </Button>
<DropdownMenu.Item>Logout</DropdownMenu.Item> </Sheet.Trigger>
</DropdownMenu.Content> <Sheet.Content side="left" class="flex flex-col">
</DropdownMenu.Root> <nav class="grid gap-2 text-lg font-medium">
</header> <a href="##" class="flex items-center gap-2 text-lg font-semibold">
<main class="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6"> <Rocket class="h-6 w-6" />
<div class="flex items-center"> <span>Nostrocket LFG</span>
<h1 class="text-lg font-semibold md:text-2xl">{title}</h1> </a>
</div> <NewMenu />
<slot name="content"></slot> </nav>
</main> <div class="mt-auto">
</div> <RocketPillCard />
</div> </div>
</Sheet.Content>
</Sheet.Root>
<div
class="flex items-center bg-indigo-800 p-2 leading-none text-indigo-100 lg:inline-flex lg:rounded-full"
role="alert"
>
<span class="mr-3 flex rounded-full bg-indigo-500 px-2 py-1 text-xs font-bold uppercase"
>Alert</span
>
<span class="mr-2 flex-auto text-left font-semibold"
>Nostrocket is sooooo not ready yet, don't expect everything to work</span
>
</div>
<div class="w-full flex-1">
<form>
<div class="relative">
<Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="search"
placeholder="Search Nostrocket..."
class="w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3"
/>
</div>
</form>
</div>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} variant="secondary" size="icon" class="rounded-full">
<CircleUser class="h-5 w-5" />
<span class="sr-only">Toggle user menu</span>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Label>My Account</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Item>Settings</DropdownMenu.Item>
<DropdownMenu.Item>Support</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item>Logout</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</header>
<main class="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
<slot name="content"></slot>
</main>
</div>
</div>

6
src/routes/+layout.svelte
View File

@@ -2,8 +2,10 @@
import { RocketSolid } from 'svelte-awesome-icons'; import { RocketSolid } from 'svelte-awesome-icons';
import '../app.css'; import '../app.css';
import { ModeWatcher } from 'mode-watcher'; import { ModeWatcher } from 'mode-watcher';
import SidePanelLayout from '../layouts/SidePanelLayout.svelte';
</script> </script>
<ModeWatcher /> <ModeWatcher />
<SidePanelLayout>
<slot></slot> <div slot="content"><slot></slot></div>
</SidePanelLayout>
<style></style> <style></style>

5
src/routes/+page.svelte
View File

@@ -1,9 +1,6 @@
<script> <script>
import SidePanelLayout from "../layouts/SidePanelLayout.svelte";
import N00b from "../views/n00b/N00b.svelte"; import N00b from "../views/n00b/N00b.svelte";
</script> </script>
<SidePanelLayout> <N00b />
<N00b slot="content" />
</SidePanelLayout>

51
src/routes/rockets/new/+page.svelte
View File

@@ -4,34 +4,29 @@
import { RocketState } from '@/types'; import { RocketState } from '@/types';
import { NDKEvent } from '@nostr-dev-kit/ndk'; import { NDKEvent } from '@nostr-dev-kit/ndk';
import SidePanelLayout from '../../../layouts/SidePanelLayout.svelte'; import SidePanelLayout from '../../../layouts/SidePanelLayout.svelte';
import Heading from '../../../components/Heading.svelte';
let rocketName:string; let rocketName: string;
$:err = undefined; $: err = undefined;
function validate() { function validate() {
let e = new NDKEvent() let e = new NDKEvent();
e.dTag = rocketName e.dTag = rocketName;
try { try {
new RocketState(e) new RocketState(e);
} catch(_err) { } catch (_err) {
console.log(_err) console.log(_err);
err = _err err = _err;
return return;
} }
err = undefined err = undefined;
console.log(new RocketState(e)) console.log(new RocketState(e));
}
}
</script> </script>
<Heading title="Create a New Rocket" />
<SidePanelLayout> <div class="flex w-full max-w-sm flex-col gap-1.5">
<div slot="content"> <Input type="email" id="email-2" placeholder="Name" bind:value={rocketName} />
<div class="flex w-full max-w-sm flex-col gap-1.5"> <p class="text-sm text-muted-foreground">Enter the name of your new Rocket</p>
<Input type="email" id="email-2" placeholder="Name" bind:value={rocketName} /> <Button on:click={validate} type="submit">Publish</Button>
<p class="text-sm text-muted-foreground">Enter the name of your new Rocket</p> <div>{err ? err : ''}</div>
<Button on:click={validate} type="submit">Publish</Button> </div>
<div>{err?err:""}</div>
</div>
</div>
</SidePanelLayout>

5
src/routes/test/+page.svelte
View File

@@ -1,8 +1,5 @@
<script lang="ts"> <script lang="ts">
import EmptyList from "../../components/EmptyList.svelte"; import EmptyList from "../../components/EmptyList.svelte";
import SidePanelLayout from "../../layouts/SidePanelLayout.svelte";
</script> </script>
<SidePanelLayout title={"Inventory"}>
<div slot="content"><EmptyList /></div>

90
src/views/rockets/Rockets.svelte
View File

@@ -1,55 +1,49 @@
<script> <script>
import Heading from '../../components/Heading.svelte';
import SidePanelLayout from '../../layouts/SidePanelLayout.svelte'; import SidePanelLayout from '../../layouts/SidePanelLayout.svelte';
</script> </script>
<SidePanelLayout> <Heading title="Rockets" />
<div slot="content"> <div
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"> class="max-w-sm rounded-lg border border-gray-200 bg-white shadow dark:border-gray-700 dark:bg-gray-800"
Rockets >
</h1> <a href="#">
<div <img
class="max-w-sm rounded-lg border border-gray-200 bg-white shadow dark:border-gray-700 dark:bg-gray-800" class="rounded-t-lg"
src="https://assets.editorial.aetnd.com/uploads/2009/11/joseph-stalin-gettyimages-464426375.jpg"
alt=""
/>
</a>
<div class="p-5">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
The People's Rocket
</h5>
</a>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
Dedicated to delivering excellence through central planning.
</p>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Created by PabloF7z</p>
<a
href="#"
class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
> >
<a href="#"> Read more
<img <svg
class="rounded-t-lg" class="ms-2 h-3.5 w-3.5 rtl:rotate-180"
src="https://assets.editorial.aetnd.com/uploads/2009/11/joseph-stalin-gettyimages-464426375.jpg" aria-hidden="true"
alt="" xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 10"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 5h12m0 0L9 1m4 4L9 9"
/> />
</a> </svg>
<div class="p-5"> </a>
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
The People's Rocket
</h5>
</a>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
Dedicated to delivering excellence through central planning.
</p>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Created by PabloF7z</p>
<a
href="#"
class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Read more
<svg
class="ms-2 h-3.5 w-3.5 rtl:rotate-180"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 10"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 5h12m0 0L9 1m4 4L9 9"
/>
</svg>
</a>
</div>
</div>
</div> </div>
</SidePanelLayout> </div>