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