mirror of
https://github.com/aljazceru/hypergolic.git
synced 2025-12-18 14:04:21 +01:00
problem: layout and menu structure are repetative
This commit is contained in:
gsovereignty
9
src/components/Heading.svelte
Normal file
9
src/components/Heading.svelte
Normal 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>
|
||||
@@ -8,6 +8,7 @@
|
||||
let iconClass = "h-5 w-5 md:h-4 md:w-4"
|
||||
|
||||
let getClass = (menuItem:string) => {
|
||||
//todo: make this re-run any time our path changes
|
||||
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"
|
||||
} else {
|
||||
|
||||
@@ -1,118 +1,110 @@
|
||||
<script lang="ts">
|
||||
import Bell from "lucide-svelte/icons/bell";
|
||||
import CircleUser from "lucide-svelte/icons/circle-user";
|
||||
import Menu from "lucide-svelte/icons/menu";
|
||||
import Search from "lucide-svelte/icons/search";
|
||||
import Bell from 'lucide-svelte/icons/bell';
|
||||
import CircleUser from 'lucide-svelte/icons/circle-user';
|
||||
import Menu from 'lucide-svelte/icons/menu';
|
||||
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";
|
||||
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 = ""
|
||||
|
||||
export let title = '';
|
||||
</script>
|
||||
|
||||
|
||||
<div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
|
||||
<div class="hidden border-r bg-muted/40 md:block">
|
||||
<div class="flex h-full max-h-screen flex-col gap-2">
|
||||
<div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
|
||||
<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>
|
||||
<div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
|
||||
<div class="hidden border-r bg-muted/40 md:block">
|
||||
<div class="flex h-full max-h-screen flex-col gap-2">
|
||||
<div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
|
||||
<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>
|
||||
</Sheet.Root>
|
||||
|
||||
|
||||
</nav>
|
||||
<div class="mt-auto">
|
||||
<RocketPillCard />
|
||||
</div>
|
||||
</Sheet.Content>
|
||||
</Sheet.Root>
|
||||
|
||||
<div class="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<div class="flex items-center">
|
||||
<h1 class="text-lg font-semibold md:text-2xl">{title}</h1>
|
||||
</div>
|
||||
<slot name="content"></slot>
|
||||
</main>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
@@ -2,8 +2,10 @@
|
||||
import { RocketSolid } from 'svelte-awesome-icons';
|
||||
import '../app.css';
|
||||
import { ModeWatcher } from 'mode-watcher';
|
||||
import SidePanelLayout from '../layouts/SidePanelLayout.svelte';
|
||||
</script>
|
||||
<ModeWatcher />
|
||||
|
||||
<slot></slot>
|
||||
<SidePanelLayout>
|
||||
<div slot="content"><slot></slot></div>
|
||||
</SidePanelLayout>
|
||||
<style></style>
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
<script>
|
||||
import SidePanelLayout from "../layouts/SidePanelLayout.svelte";
|
||||
import N00b from "../views/n00b/N00b.svelte";
|
||||
|
||||
|
||||
</script>
|
||||
<SidePanelLayout>
|
||||
<N00b slot="content" />
|
||||
</SidePanelLayout>
|
||||
<N00b />
|
||||
@@ -4,34 +4,29 @@
|
||||
import { RocketState } from '@/types';
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import SidePanelLayout from '../../../layouts/SidePanelLayout.svelte';
|
||||
import Heading from '../../../components/Heading.svelte';
|
||||
|
||||
let rocketName:string;
|
||||
$:err = undefined;
|
||||
|
||||
function validate() {
|
||||
let e = new NDKEvent()
|
||||
e.dTag = rocketName
|
||||
try {
|
||||
new RocketState(e)
|
||||
} catch(_err) {
|
||||
console.log(_err)
|
||||
err = _err
|
||||
return
|
||||
}
|
||||
err = undefined
|
||||
console.log(new RocketState(e))
|
||||
|
||||
}
|
||||
let rocketName: string;
|
||||
$: err = undefined;
|
||||
|
||||
function validate() {
|
||||
let e = new NDKEvent();
|
||||
e.dTag = rocketName;
|
||||
try {
|
||||
new RocketState(e);
|
||||
} catch (_err) {
|
||||
console.log(_err);
|
||||
err = _err;
|
||||
return;
|
||||
}
|
||||
err = undefined;
|
||||
console.log(new RocketState(e));
|
||||
}
|
||||
</script>
|
||||
|
||||
<SidePanelLayout>
|
||||
<div slot="content">
|
||||
<div class="flex w-full max-w-sm flex-col gap-1.5">
|
||||
<Input type="email" id="email-2" placeholder="Name" bind:value={rocketName} />
|
||||
<p class="text-sm text-muted-foreground">Enter the name of your new Rocket</p>
|
||||
<Button on:click={validate} type="submit">Publish</Button>
|
||||
<div>{err?err:""}</div>
|
||||
</div>
|
||||
</div>
|
||||
</SidePanelLayout>
|
||||
<Heading title="Create a New Rocket" />
|
||||
<div class="flex w-full max-w-sm flex-col gap-1.5">
|
||||
<Input type="email" id="email-2" placeholder="Name" bind:value={rocketName} />
|
||||
<p class="text-sm text-muted-foreground">Enter the name of your new Rocket</p>
|
||||
<Button on:click={validate} type="submit">Publish</Button>
|
||||
<div>{err ? err : ''}</div>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
<script lang="ts">
|
||||
|
||||
import EmptyList from "../../components/EmptyList.svelte";
|
||||
import SidePanelLayout from "../../layouts/SidePanelLayout.svelte";
|
||||
|
||||
</script>
|
||||
<SidePanelLayout title={"Inventory"}>
|
||||
<div slot="content"><EmptyList /></div>
|
||||
</script>
|
||||
@@ -1,55 +1,49 @@
|
||||
<script>
|
||||
|
||||
import Heading from '../../components/Heading.svelte';
|
||||
import SidePanelLayout from '../../layouts/SidePanelLayout.svelte';
|
||||
</script>
|
||||
|
||||
<SidePanelLayout>
|
||||
<div slot="content">
|
||||
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
|
||||
Rockets
|
||||
</h1>
|
||||
<div
|
||||
class="max-w-sm rounded-lg border border-gray-200 bg-white shadow dark:border-gray-700 dark:bg-gray-800"
|
||||
<Heading title="Rockets" />
|
||||
<div
|
||||
class="max-w-sm rounded-lg border border-gray-200 bg-white shadow dark:border-gray-700 dark:bg-gray-800"
|
||||
>
|
||||
<a href="#">
|
||||
<img
|
||||
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="#">
|
||||
<img
|
||||
class="rounded-t-lg"
|
||||
src="https://assets.editorial.aetnd.com/uploads/2009/11/joseph-stalin-gettyimages-464426375.jpg"
|
||||
alt=""
|
||||
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"
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
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>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</SidePanelLayout>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user