mirror of https://github.com/TZGyn/shortener
added breadcrumbs and update layouts
parent
ca55b04492
commit
27e732940a
GPG Key ID:
122EAF77AE81FD4A
Binary file not shown.
@ -0,0 +1,23 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { HTMLAttributes } from 'svelte/elements'
|
||||||
|
import { MoreHorizontal } from 'lucide-svelte'
|
||||||
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
|
type $$Props = HTMLAttributes<HTMLSpanElement> & {
|
||||||
|
el?: HTMLSpanElement
|
||||||
|
}
|
||||||
|
|
||||||
|
export let el: $$Props['el'] = undefined
|
||||||
|
let className: $$Props['class'] = undefined
|
||||||
|
export { className as class }
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<span
|
||||||
|
bind:this={el}
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
class={cn('flex h-9 w-9 items-center justify-center', className)}
|
||||||
|
{...$$restProps}>
|
||||||
|
<MoreHorizontal class="h-4 w-4" />
|
||||||
|
<span class="sr-only">More</span>
|
||||||
|
</span>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { HTMLLiAttributes } from "svelte/elements";
|
||||||
|
import { cn } from "$lib/utils.js";
|
||||||
|
|
||||||
|
type $$Props = HTMLLiAttributes & {
|
||||||
|
el?: HTMLLIElement;
|
||||||
|
};
|
||||||
|
|
||||||
|
export let el: $$Props["el"] = undefined;
|
||||||
|
let className: $$Props["class"] = undefined;
|
||||||
|
export { className as class };
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<li bind:this={el} class={cn("inline-flex items-center gap-1.5", className)}>
|
||||||
|
<slot />
|
||||||
|
</li>
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { HTMLAnchorAttributes } from 'svelte/elements'
|
||||||
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
|
type $$Props = HTMLAnchorAttributes & {
|
||||||
|
el?: HTMLAnchorElement
|
||||||
|
asChild?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export let href: $$Props['href'] = undefined
|
||||||
|
export let el: $$Props['el'] = undefined
|
||||||
|
export let asChild: $$Props['asChild'] = false
|
||||||
|
let className: $$Props['class'] = undefined
|
||||||
|
export { className as class }
|
||||||
|
|
||||||
|
let attrs: Record<string, unknown>
|
||||||
|
|
||||||
|
$: attrs = {
|
||||||
|
class: cn(
|
||||||
|
'transition-colors hover:text-foreground hover:cursor-pointer',
|
||||||
|
className,
|
||||||
|
),
|
||||||
|
href,
|
||||||
|
...$$restProps,
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if asChild}
|
||||||
|
<slot {attrs} />
|
||||||
|
{:else}
|
||||||
|
<a bind:this={el} {...attrs} {href}>
|
||||||
|
<slot {attrs} />
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { HTMLOlAttributes } from "svelte/elements";
|
||||||
|
import { cn } from "$lib/utils.js";
|
||||||
|
|
||||||
|
type $$Props = HTMLOlAttributes & {
|
||||||
|
el?: HTMLOListElement;
|
||||||
|
};
|
||||||
|
|
||||||
|
export let el: $$Props["el"] = undefined;
|
||||||
|
let className: $$Props["class"] = undefined;
|
||||||
|
export { className as class };
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ol
|
||||||
|
bind:this={el}
|
||||||
|
class={cn(
|
||||||
|
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...$$restProps}
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</ol>
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { HTMLAnchorAttributes } from 'svelte/elements'
|
||||||
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
|
type $$Props = HTMLAnchorAttributes & {
|
||||||
|
el?: HTMLSpanElement
|
||||||
|
}
|
||||||
|
|
||||||
|
export let el: $$Props['el'] = undefined
|
||||||
|
export let className: $$Props['class'] = undefined
|
||||||
|
export let href: $$Props['href'] = undefined
|
||||||
|
export { className as class }
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a
|
||||||
|
bind:this={el}
|
||||||
|
aria-disabled="true"
|
||||||
|
aria-current="page"
|
||||||
|
{href}
|
||||||
|
class={cn(
|
||||||
|
'font-normal text-foreground hover:cursor-pointer',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...$$restProps}>
|
||||||
|
<slot />
|
||||||
|
</a>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { HTMLLiAttributes } from 'svelte/elements'
|
||||||
|
import { ChevronRight } from 'lucide-svelte'
|
||||||
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
|
type $$Props = HTMLLiAttributes & {
|
||||||
|
el?: HTMLLIElement
|
||||||
|
}
|
||||||
|
|
||||||
|
export let el: $$Props['el'] = undefined
|
||||||
|
let className: $$Props['class'] = undefined
|
||||||
|
export { className as class }
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<li
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
class={cn('[&>svg]:size-3.5', className)}
|
||||||
|
bind:this={el}
|
||||||
|
{...$$restProps}>
|
||||||
|
<slot>
|
||||||
|
<ChevronRight size={16} />
|
||||||
|
</slot>
|
||||||
|
</li>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { HTMLAttributes } from "svelte/elements";
|
||||||
|
|
||||||
|
type $$Props = HTMLAttributes<HTMLElement> & {
|
||||||
|
el?: HTMLElement;
|
||||||
|
};
|
||||||
|
|
||||||
|
export let el: $$Props["el"] = undefined;
|
||||||
|
let className: $$Props["class"] = undefined;
|
||||||
|
export { className as class };
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<nav class={className} bind:this={el} aria-label="breadcrumb" {...$$restProps}>
|
||||||
|
<slot />
|
||||||
|
</nav>
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import Root from "./breadcrumb.svelte";
|
||||||
|
import Ellipsis from "./breadcrumb-ellipsis.svelte";
|
||||||
|
import Item from "./breadcrumb-item.svelte";
|
||||||
|
import Separator from "./breadcrumb-separator.svelte";
|
||||||
|
import Link from "./breadcrumb-link.svelte";
|
||||||
|
import List from "./breadcrumb-list.svelte";
|
||||||
|
import Page from "./breadcrumb-page.svelte";
|
||||||
|
|
||||||
|
export {
|
||||||
|
Root,
|
||||||
|
Ellipsis,
|
||||||
|
Item,
|
||||||
|
Separator,
|
||||||
|
Link,
|
||||||
|
List,
|
||||||
|
Page,
|
||||||
|
//
|
||||||
|
Root as Breadcrumb,
|
||||||
|
Ellipsis as BreadcrumbEllipsis,
|
||||||
|
Item as BreadcrumbItem,
|
||||||
|
Separator as BreadcrumbSeparator,
|
||||||
|
Link as BreadcrumbLink,
|
||||||
|
List as BreadcrumbList,
|
||||||
|
Page as BreadcrumbPage,
|
||||||
|
};
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import type { LayoutServerLoad } from './$types'
|
||||||
|
|
||||||
|
export const load = (async (event) => {
|
||||||
|
const { breadcrumbs: parentBreadcrumbs } = await event.parent()
|
||||||
|
const breadcrumbs = [
|
||||||
|
...parentBreadcrumbs,
|
||||||
|
{ name: 'Links', path: '/links' },
|
||||||
|
]
|
||||||
|
return { breadcrumbs }
|
||||||
|
}) satisfies LayoutServerLoad
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import type { LayoutServerLoad } from './$types'
|
||||||
|
|
||||||
|
export const load = (async (event) => {
|
||||||
|
const { breadcrumbs: parentBreadcrumbs } = await event.parent()
|
||||||
|
const breadcrumbs = [
|
||||||
|
...parentBreadcrumbs,
|
||||||
|
{ name: 'Projects', path: '/projects' },
|
||||||
|
]
|
||||||
|
return { breadcrumbs }
|
||||||
|
}) satisfies LayoutServerLoad
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import type { LayoutServerLoad } from './$types'
|
||||||
|
|
||||||
|
export const load = (async (event) => {
|
||||||
|
const { breadcrumbs: parentBreadcrumbs } = await event.parent()
|
||||||
|
const breadcrumbs = [
|
||||||
|
...parentBreadcrumbs,
|
||||||
|
{ name: 'Settings', path: '/settings' },
|
||||||
|
]
|
||||||
|
return { breadcrumbs }
|
||||||
|
}) satisfies LayoutServerLoad
|
||||||
Loading…
Reference in New Issue