TZGyn
/
kon.sh
mirror of https://github.com/TZGyn/shortener
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update all pages to svelte 5 except analytics page

Browse Source
main
TZGyn 1 year ago
parent 3bd7de779e
commit 6d10c1932c
Signed by: TZGyn
GPG Key ID: 122EAF77AE81FD4A
34 changed files with 345 additions and 249 deletions
Show Stats Download Patch File Download Diff File

3
frontend/src/routes/(app)/dashboard/+page.svelte
Unescape Escape View File

@ -1,11 +1,10 @@
<script lang="ts"> <script lang="ts">
import type { PageData } from './$types'
import * as Card from '$lib/components/ui/card' import * as Card from '$lib/components/ui/card'
import { Button } from '$lib/components/ui/button' import { Button } from '$lib/components/ui/button'
import { Separator } from '$lib/components/ui/separator' import { Separator } from '$lib/components/ui/separator'
import { BarChart, ExternalLink } from 'lucide-svelte' import { BarChart, ExternalLink } from 'lucide-svelte'
export let data: PageData let { data } = $props()
</script> </script>
<div class="flex flex-col gap-4 px-10 py-8"> <div class="flex flex-col gap-4 px-10 py-8">

2
frontend/src/routes/(app)/dashboard/[...catchall]/+page.svelte
Unescape Escape View File

@ -9,7 +9,7 @@
<div class="text-4xl font-bold">404</div> <div class="text-4xl font-bold">404</div>
<div class="text-4xl font-bold">Page Not Found</div> <div class="text-4xl font-bold">Page Not Found</div>
</div> </div>
<Button on:click={() => goto('/dashboard')} class="w-fit"> <Button onclick={() => goto('/dashboard')} class="w-fit">
Return Home Return Home
</Button> </Button>
</div> </div>

5
frontend/src/routes/(app)/dashboard/billing/+page.svelte
Unescape Escape View File

@ -5,14 +5,13 @@
import { Separator } from '$lib/components/ui/separator' import { Separator } from '$lib/components/ui/separator'
import * as Dialog from '$lib/components/ui/dialog' import * as Dialog from '$lib/components/ui/dialog'
import { Check, LoaderCircleIcon } from 'lucide-svelte' import { Check, LoaderCircleIcon } from 'lucide-svelte'
import type { PageData } from './$types'
import { zodClient } from 'sveltekit-superforms/adapters' import { zodClient } from 'sveltekit-superforms/adapters'
import { cancelSubscriptionSchema } from './schema' import { cancelSubscriptionSchema } from './schema'
import { superForm } from 'sveltekit-superforms' import { superForm } from 'sveltekit-superforms'
import { toast } from 'svelte-sonner' import { toast } from 'svelte-sonner'
import { ScrollArea } from '$lib/components/ui/scroll-area' import { ScrollArea } from '$lib/components/ui/scroll-area'
export let data: PageData let { data } = $props()
let cancelPlanDialogOpen = false let cancelPlanDialogOpen = false
@ -158,7 +157,7 @@
<Dialog.Footer> <Dialog.Footer>
<Button <Button
variant={'outline'} variant={'outline'}
on:click={() => (cancelPlanDialogOpen = false)}> onclick={() => (cancelPlanDialogOpen = false)}>
Cancel Cancel
</Button> </Button>
<form <form

2
frontend/src/routes/(app)/dashboard/billing/plan/pro/success/+page.svelte
Unescape Escape View File

@ -2,8 +2,6 @@
import { Button } from '$lib/components/ui/button' import { Button } from '$lib/components/ui/button'
import { CheckCircleIcon } from 'lucide-svelte' import { CheckCircleIcon } from 'lucide-svelte'
import * as Dialog from '$lib/components/ui/dialog' import * as Dialog from '$lib/components/ui/dialog'
export let data
</script> </script>
<Dialog.Root open> <Dialog.Root open>

37
frontend/src/routes/(app)/dashboard/links/(components)/form.svelte
Unescape Escape View File

@ -18,10 +18,16 @@
import { ScrollArea } from '$lib/components/ui/scroll-area' import { ScrollArea } from '$lib/components/ui/scroll-area'
import type { Project } from '$lib/db/types' import type { Project } from '$lib/db/types'
export let data: SuperValidated<Infer<FormSchema>> let {
export let projects: Project[] data,
export let dialogOpen: boolean projects,
let shortenerCategory: any = undefined dialogOpen = $bindable(),
}: {
data: SuperValidated<Infer<FormSchema>>
projects: Project[]
dialogOpen: boolean
} = $props()
let shortenerCategory = $state<any>(undefined)
const form = superForm(data, { const form = superForm(data, {
validators: zodClient(formSchema), validators: zodClient(formSchema),
@ -40,9 +46,9 @@
const { form: formData, enhance, submitting } = form const { form: formData, enhance, submitting } = form
let inputTimer: any let inputTimer = $state<any>()
let previewData: any let previewData = $state<any>()
let isPreviewLoading: boolean = false let isPreviewLoading = $state(false)
const getMetadata = async () => { const getMetadata = async () => {
isPreviewLoading = true isPreviewLoading = true
@ -108,7 +114,7 @@
{...attrs} {...attrs}
bind:value={$formData.link} bind:value={$formData.link}
placeholder="https://example.com" placeholder="https://example.com"
on:input={getMetadata} /> oninput={getMetadata} />
</Form.Control> </Form.Control>
<Form.Description>Shortener link</Form.Description> <Form.Description>Shortener link</Form.Description>
<Form.FieldErrors /> <Form.FieldErrors />
@ -167,8 +173,9 @@
bind:value={$formData.custom_code} bind:value={$formData.custom_code}
placeholder="abcde" /> placeholder="abcde" />
</Form.Control> </Form.Control>
<Form.Description <Form.Description>
>Custom Code For The Shortener</Form.Description> Custom Code For The Shortener
</Form.Description>
<Form.FieldErrors /> <Form.FieldErrors />
</Form.Field> </Form.Field>
{/if} {/if}
@ -192,8 +199,9 @@
bind:value={$formData.ios_link} bind:value={$formData.ios_link}
placeholder="https://example.com" /> placeholder="https://example.com" />
</Form.Control> </Form.Control>
<Form.Description <Form.Description>
>Shortener link for iOS</Form.Description> Shortener link for iOS
</Form.Description>
<Form.FieldErrors /> <Form.FieldErrors />
</Form.Field> </Form.Field>
{/if} {/if}
@ -217,8 +225,9 @@
bind:value={$formData.android_link} bind:value={$formData.android_link}
placeholder="https://example.com" /> placeholder="https://example.com" />
</Form.Control> </Form.Control>
<Form.Description <Form.Description>
>Shortener link for Android</Form.Description> Shortener link for Android
</Form.Description>
<Form.FieldErrors /> <Form.FieldErrors />
</Form.Field> </Form.Field>
{/if} {/if}

40
frontend/src/routes/(app)/dashboard/links/+page.svelte
Unescape Escape View File

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import type { PageData } from './$types'
import { page } from '$app/stores' import { page } from '$app/stores'
import { Button } from '$lib/components/ui/button' import { Button } from '$lib/components/ui/button'
@ -24,23 +23,23 @@
import type { Project, Shortener } from '$lib/db/types' import type { Project, Shortener } from '$lib/db/types'
import type { Selected } from 'bits-ui' import type { Selected } from 'bits-ui'
export let data: PageData let { data } = $props()
let dialogOpen = false let dialogOpen = $state(false)
let search: string | null = '' let search = $state<string | null>('')
let searchUpdateTimeout: any let searchUpdateTimeout = $state<any>()
let pageNumber = 1 let pageNumber = $state(1)
let perPage = 12 let perPage = $state(12)
let sortBy: Selected<string> = { let sortBy = $state<Selected<string>>({
label: 'Latest', label: 'Latest',
value: 'latest', value: 'latest',
} })
let selectedProject: Selected<string> = { let selectedProject = $state<Selected<string>>({
label: 'All', label: 'All',
value: 'all', value: 'all',
} })
const fetchShorteners = async ( const fetchShorteners = async (
page: number, page: number,
@ -72,8 +71,13 @@
} }
} }
$: projectLinkQROpen = !!$page.state.projectLinkQR let projectLinkQROpen = $state(!!$page.state.projectLinkQR)
$: linkQROpen = !!$page.state.linkQR let linkQROpen = $state(!!$page.state.linkQR)
$effect(() => {
projectLinkQROpen = !!$page.state.projectLinkQR
linkQROpen = !!$page.state.linkQR
})
</script> </script>
<div <div
@ -152,14 +156,14 @@
placeholder="search" placeholder="search"
autofocus autofocus
value={search} value={search}
on:input={({ target }) => { oninput={({ target }) => {
clearTimeout(searchUpdateTimeout) clearTimeout(searchUpdateTimeout)
searchUpdateTimeout = setTimeout(() => { searchUpdateTimeout = setTimeout(() => {
search = target.value search = target.value
pageNumber = 1 pageNumber = 1
}, 500) }, 500)
}} /> }} />
<Button disabled={!search} on:click={() => (search = '')}> <Button disabled={!search} onclick={() => (search = '')}>
Clear Clear
</Button> </Button>
</div> </div>
@ -230,14 +234,14 @@
class="max-w-[250px]" class="max-w-[250px]"
autofocus autofocus
value={search} value={search}
on:input={({ target }) => { oninput={({ target }) => {
clearTimeout(searchUpdateTimeout) clearTimeout(searchUpdateTimeout)
searchUpdateTimeout = setTimeout(() => { searchUpdateTimeout = setTimeout(() => {
search = target.value search = target.value
pageNumber = 1 pageNumber = 1
}, 500) }, 500)
}} /> }} />
<Button disabled={!search} on:click={() => (search = '')}> <Button disabled={!search} onclick={() => (search = '')}>
Clear Clear
</Button> </Button>
</div> </div>
@ -346,7 +350,7 @@
<p class="text-muted-foreground">Add a new shortener</p> <p class="text-muted-foreground">Add a new shortener</p>
</div> </div>
<Button <Button
on:click={() => { onclick={() => {
dialogOpen = true dialogOpen = true
}} }}
class="w-fit"> class="w-fit">

15
frontend/src/routes/(app)/dashboard/links/[id]/edit/(components)/form.svelte
Unescape Escape View File

@ -14,8 +14,11 @@
import { Checkbox } from '$lib/components/ui/checkbox' import { Checkbox } from '$lib/components/ui/checkbox'
import { onMount } from 'svelte' import { onMount } from 'svelte'
export let data: SuperValidated<Infer<FormSchema>> let {
export let code: string data,
code,
}: { data: SuperValidated<Infer<FormSchema>>; code: string } =
$props()
const form = superForm(data, { const form = superForm(data, {
validators: zodClient(formSchema), validators: zodClient(formSchema),
@ -33,9 +36,9 @@
const { form: formData, enhance, submitting } = form const { form: formData, enhance, submitting } = form
let inputTimer: any let inputTimer: any = $state()
let previewData: any let previewData: any = $state()
let isPreviewLoading: boolean = false let isPreviewLoading: boolean = $state(false)
const getMetadata = async () => { const getMetadata = async () => {
isPreviewLoading = true isPreviewLoading = true
@ -91,7 +94,7 @@
{...attrs} {...attrs}
bind:value={$formData.link} bind:value={$formData.link}
placeholder="https://example.com" placeholder="https://example.com"
on:input={getMetadata} /> oninput={getMetadata} />
</Form.Control> </Form.Control>
<Form.Description>Shortener link</Form.Description> <Form.Description>Shortener link</Form.Description>
<Form.FieldErrors /> <Form.FieldErrors />

6
frontend/src/routes/(app)/dashboard/links/[id]/edit/+page.svelte
Unescape Escape View File

@ -3,8 +3,10 @@
import type { PageData } from './$types' import type { PageData } from './$types'
import Form from './(components)/form.svelte' import Form from './(components)/form.svelte'
export let data: PageData let {
export let shallowRouting = false data,
shallowRouting = $bindable(false),
}: { data: PageData; shallowRouting: boolean } = $props()
</script> </script>
{#if !shallowRouting} {#if !shallowRouting}

63
frontend/src/routes/(app)/dashboard/links/[id]/qr/(components)/qr.svelte
Unescape Escape View File

@ -1,20 +1,30 @@
<script lang="ts"> <script lang="ts">
import { Button } from '$lib/components/ui/button' import { Button, buttonVariants } from '$lib/components/ui/button'
import { toast } from 'svelte-sonner' import { toast } from 'svelte-sonner'
import * as DropdownMenu from '$lib/components/ui/dropdown-menu' import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js'
import { Badge } from '$lib/components/ui/badge' import { Badge } from '$lib/components/ui/badge'
import { browser } from '$app/environment' import { browser } from '$app/environment'
import { cn } from '$lib/utils'
export let background = '#fff' let {
export let color = '#000' background = '#fff',
export let value = '' color = '#000',
export let code = '' value = '',
export let cornerSquareStyle: 'dot' | 'square' | 'extra-rounded' = code = '',
'square' cornerSquareStyle = 'square',
export let dotStyle: 'square' | 'rounded' = 'square' dotStyle = 'square',
export let existingQrImage: string | null = null existingQrImage = null,
}: {
background: string
color: string
value: string
code: string
cornerSquareStyle: 'dot' | 'square' | 'extra-rounded'
dotStyle: 'square' | 'rounded'
existingQrImage: string | null
} = $props()
let image = '' let image = $state('')
const copyImageToClipboard = async () => { const copyImageToClipboard = async () => {
if (!image) return if (!image) return
@ -70,7 +80,11 @@
image = URL.createObjectURL(blob) image = URL.createObjectURL(blob)
} }
$: value && browser && generateQrCode() $effect(() => {
if (value && browser) {
generateQrCode()
}
})
</script> </script>
<div class="flex h-full flex-col items-center gap-4"> <div class="flex h-full flex-col items-center gap-4">
@ -79,22 +93,25 @@
</Badge> </Badge>
<img src={image} alt={value} width={300} height={300} /> <img src={image} alt={value} width={300} height={300} />
<div class="flex w-full gap-4"> <div class="flex w-full gap-4">
<Button class="w-full" on:click={copyImageToClipboard}> <Button class="w-full" onclick={copyImageToClipboard}>
Copy Image Copy Image
</Button> </Button>
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger
<Button builders={[builder]} class="w-full">QR Link</Button> class={cn(buttonVariants({ variant: 'default' }), 'w-full')}>
QR Link
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
<DropdownMenu.Item href={`/url/${code}/qr`} target="_blank"> <DropdownMenu.Group>
Standard <DropdownMenu.Item href={`/url/${code}/qr`} target="_blank">
</DropdownMenu.Item> Standard
<DropdownMenu.Item </DropdownMenu.Item>
href={`/url/${code}/qr?color=true`} <DropdownMenu.Item
target="_blank"> href={`/url/${code}/qr?color=true`}
With Style target="_blank">
</DropdownMenu.Item> With Style
</DropdownMenu.Item>
</DropdownMenu.Group>
</DropdownMenu.Content> </DropdownMenu.Content>
</DropdownMenu.Root> </DropdownMenu.Root>
</div> </div>

6
frontend/src/routes/(app)/dashboard/links/[id]/qr/+page.svelte
Unescape Escape View File

@ -3,8 +3,10 @@
import type { PageData } from './$types' import type { PageData } from './$types'
import QR from './(components)/qr.svelte' import QR from './(components)/qr.svelte'
export let data: PageData let {
export let shallowRouting = false data,
shallowRouting = $bindable(false),
}: { data: PageData; shallowRouting: boolean } = $props()
</script> </script>
{#if !shallowRouting} {#if !shallowRouting}

6
frontend/src/routes/(app)/dashboard/projects/+page.svelte
Unescape Escape View File

@ -11,9 +11,9 @@
import { zodClient } from 'sveltekit-superforms/adapters' import { zodClient } from 'sveltekit-superforms/adapters'
import { toast } from 'svelte-sonner' import { toast } from 'svelte-sonner'
export let data let { data } = $props()
let dialogOpen = false let dialogOpen = $state(false)
const form = superForm(data.form, { const form = superForm(data.form, {
validators: zodClient(formSchema), validators: zodClient(formSchema),
@ -102,7 +102,7 @@
<p class="text-muted-foreground">Add a new project</p> <p class="text-muted-foreground">Add a new project</p>
</div> </div>
<Button <Button
on:click={() => { onclick={() => {
dialogOpen = true dialogOpen = true
}} }}
class="w-fit"> class="w-fit">

17
frontend/src/routes/(app)/dashboard/projects/[id]/(components)/form.svelte
Unescape Escape View File

@ -16,8 +16,13 @@
import { Checkbox } from '$lib/components/ui/checkbox' import { Checkbox } from '$lib/components/ui/checkbox'
import { ScrollArea } from '$lib/components/ui/scroll-area' import { ScrollArea } from '$lib/components/ui/scroll-area'
export let data: SuperValidated<Infer<FormSchema>> let {
export let dialogOpen: boolean data,
dialogOpen = $bindable(),
}: {
data: SuperValidated<Infer<FormSchema>>
dialogOpen: boolean
} = $props()
const form = superForm(data, { const form = superForm(data, {
validators: zodClient(formSchema), validators: zodClient(formSchema),
@ -36,9 +41,9 @@
const { form: formData, enhance, submitting } = form const { form: formData, enhance, submitting } = form
let inputTimer: any let inputTimer: any = $state()
let previewData: any let previewData: any = $state()
let isPreviewLoading: boolean = false let isPreviewLoading: boolean = $state(false)
const getMetadata = async () => { const getMetadata = async () => {
isPreviewLoading = true isPreviewLoading = true
@ -104,7 +109,7 @@
{...attrs} {...attrs}
bind:value={$formData.link} bind:value={$formData.link}
placeholder="https://example.com" placeholder="https://example.com"
on:input={getMetadata} /> oninput={getMetadata} />
</Form.Control> </Form.Control>
<Form.Description>Shortener link</Form.Description> <Form.Description>Shortener link</Form.Description>
<Form.FieldErrors /> <Form.FieldErrors />

5
frontend/src/routes/(app)/dashboard/projects/[id]/+layout.svelte
Unescape Escape View File

@ -1,11 +1,10 @@
<script lang="ts"> <script lang="ts">
import type { PageData } from './$types'
import { page } from '$app/stores' import { page } from '$app/stores'
import { Button } from '$lib/components/ui/button' import { Button } from '$lib/components/ui/button'
import { Separator } from '$lib/components/ui/separator' import { Separator } from '$lib/components/ui/separator'
import { ScrollArea } from '$lib/components/ui/scroll-area' import { ScrollArea } from '$lib/components/ui/scroll-area'
export let data: PageData let { data, children } = $props()
</script> </script>
<div class="flex h-fit flex-col gap-2 px-4 pt-8 md:px-10"> <div class="flex h-fit flex-col gap-2 px-4 pt-8 md:px-10">
@ -40,5 +39,5 @@
</div> </div>
<div class="flex w-full flex-grow flex-col overflow-hidden"> <div class="flex w-full flex-grow flex-col overflow-hidden">
<slot /> {@render children()}
</div> </div>

74
frontend/src/routes/(app)/dashboard/projects/[id]/+page.svelte
Unescape Escape View File

@ -14,30 +14,31 @@
import { SortAscIcon, SortDescIcon } from 'lucide-svelte' import { SortAscIcon, SortDescIcon } from 'lucide-svelte'
import type { PageData } from './$types'
import { ScrollArea } from '$lib/components/ui/scroll-area' import { ScrollArea } from '$lib/components/ui/scroll-area'
import Form from './(components)/form.svelte' import Form from './(components)/form.svelte'
import EditProjectLinkPage from './links/[linkid]/edit/+page.svelte' import EditProjectLinkPage from './links/[linkid]/edit/+page.svelte'
import ProjectLinkQRPage from './links/[linkid]/qr/+page.svelte' import ProjectLinkQRPage from './links/[linkid]/qr/+page.svelte'
export let data: PageData let { data } = $props()
let dialogOpen = false let dialogOpen = $state(false)
let search: string | null = data.search let search = $state<string | null>(data.search)
let searchUpdateTimeout: any let searchUpdateTimeout = $state<any>()
$: browser && $effect(() => {
search && if (browser && (search || true)) {
goto( goto(
updateSearchParam([ updateSearchParam([
{ name: 'search', value: search }, { name: 'search', value: search },
{ {
name: 'page', name: 'page',
value: 1, value: 1,
}, },
]), ]),
) )
}
})
const updateSearchParam = ( const updateSearchParam = (
params: { name: string; value: any }[], params: { name: string; value: any }[],
@ -61,10 +62,13 @@
} }
} }
let editProjectLinkOpen = false let editProjectLinkOpen = $state(false)
let projectLinkQROpen = $state(false)
$: editProjectLinkOpen = !!$page.state.editProjectLink $effect(() => {
$: projectLinkQROpen = !!$page.state.projectLinkQR editProjectLinkOpen = !!$page.state.editProjectLink
projectLinkQROpen = !!$page.state.projectLinkQR
})
</script> </script>
<div <div
@ -108,24 +112,13 @@
type="text" type="text"
placeholder="search" placeholder="search"
value={search} value={search}
on:input={({ target }) => { oninput={({ target }) => {
clearTimeout(searchUpdateTimeout) clearTimeout(searchUpdateTimeout)
searchUpdateTimeout = setTimeout(() => { searchUpdateTimeout = setTimeout(() => {
search = target.value search = target.value
}, 500) }, 500)
}} /> }} />
<Button <Button disabled={!search} onclick={() => (search = '')}>
disabled={!search}
on:click={() =>
goto(
updateSearchParam([
{ name: 'search', value: search },
{
name: 'page',
value: 1,
},
]),
)}>
Clear Clear
</Button> </Button>
</div> </div>
@ -168,24 +161,13 @@
class="max-w-[250px]" class="max-w-[250px]"
autofocus autofocus
value={search} value={search}
on:input={({ target }) => { oninput={({ target }) => {
clearTimeout(searchUpdateTimeout) clearTimeout(searchUpdateTimeout)
searchUpdateTimeout = setTimeout(() => { searchUpdateTimeout = setTimeout(() => {
search = target.value search = target.value
}, 500) }, 500)
}} /> }} />
<Button <Button disabled={!search} onclick={() => (search = '')}>
disabled={!search}
on:click={() =>
goto(
updateSearchParam([
{ name: 'search', value: search },
{
name: 'page',
value: 1,
},
]),
)}>
Clear Clear
</Button> </Button>
</div> </div>
@ -223,7 +205,7 @@
<p class="text-muted-foreground">Add a new shortener</p> <p class="text-muted-foreground">Add a new shortener</p>
</div> </div>
<Button <Button
on:click={() => { onclick={() => {
dialogOpen = true dialogOpen = true
}} }}
class="w-fit"> class="w-fit">

20
frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/(components)/form.svelte
Unescape Escape View File

@ -14,9 +14,15 @@
import { Checkbox } from '$lib/components/ui/checkbox' import { Checkbox } from '$lib/components/ui/checkbox'
import { onMount } from 'svelte' import { onMount } from 'svelte'
export let data: SuperValidated<Infer<FormSchema>> let {
export let uuid: string data,
export let code: string code,
uuid,
}: {
data: SuperValidated<Infer<FormSchema>>
uuid: string
code: string
} = $props()
const form = superForm(data, { const form = superForm(data, {
validators: zodClient(formSchema), validators: zodClient(formSchema),
@ -34,9 +40,9 @@
const { form: formData, enhance, submitting } = form const { form: formData, enhance, submitting } = form
let inputTimer: any let inputTimer: any = $state()
let previewData: any let previewData: any = $state()
let isPreviewLoading: boolean = false let isPreviewLoading: boolean = $state(false)
const getMetadata = async () => { const getMetadata = async () => {
isPreviewLoading = true isPreviewLoading = true
@ -92,7 +98,7 @@
{...attrs} {...attrs}
bind:value={$formData.link} bind:value={$formData.link}
placeholder="https://example.com" placeholder="https://example.com"
on:input={getMetadata} /> oninput={getMetadata} />
</Form.Control> </Form.Control>
<Form.Description>Shortener link</Form.Description> <Form.Description>Shortener link</Form.Description>
<Form.FieldErrors /> <Form.FieldErrors />

6
frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/+page.svelte
Unescape Escape View File

@ -3,8 +3,10 @@
import type { PageData } from './$types' import type { PageData } from './$types'
import Form from './(components)/form.svelte' import Form from './(components)/form.svelte'
export let data: PageData let {
export let shallowRouting = false data,
shallowRouting = $bindable(false),
}: { data: PageData; shallowRouting: boolean } = $props()
</script> </script>
{#if !shallowRouting} {#if !shallowRouting}

61
frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/(components)/qr.svelte
Unescape Escape View File

@ -1,20 +1,30 @@
<script lang="ts"> <script lang="ts">
import { Button } from '$lib/components/ui/button' import { Button, buttonVariants } from '$lib/components/ui/button'
import { toast } from 'svelte-sonner' import { toast } from 'svelte-sonner'
import * as DropdownMenu from '$lib/components/ui/dropdown-menu' import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
import { Badge } from '$lib/components/ui/badge' import { Badge } from '$lib/components/ui/badge'
import { browser } from '$app/environment' import { browser } from '$app/environment'
import { cn } from '$lib/utils'
export let background = '#fff' let {
export let color = '#000' background = '#fff',
export let value = '' color = '#000',
export let code = '' value = '',
export let cornerSquareStyle: 'dot' | 'square' | 'extra-rounded' = code = '',
'square' cornerSquareStyle = 'square',
export let dotStyle: 'square' | 'rounded' = 'square' dotStyle = 'square',
export let existingQrImage: string | null = null existingQrImage = null,
}: {
background: string
color: string
value: string
code: string
cornerSquareStyle: 'dot' | 'square' | 'extra-rounded'
dotStyle: 'square' | 'rounded'
existingQrImage: string | null
} = $props()
let image = '' let image = $state('')
const copyImageToClipboard = async () => { const copyImageToClipboard = async () => {
if (!image) return if (!image) return
@ -70,7 +80,11 @@
image = URL.createObjectURL(blob) image = URL.createObjectURL(blob)
} }
$: value && browser && generateQrCode() $effect(() => {
if (value && browser) {
generateQrCode()
}
})
</script> </script>
<div class="flex h-full flex-col items-center gap-4"> <div class="flex h-full flex-col items-center gap-4">
@ -79,22 +93,25 @@
</Badge> </Badge>
<img src={image} alt={value} width={300} height={300} /> <img src={image} alt={value} width={300} height={300} />
<div class="flex w-full gap-4"> <div class="flex w-full gap-4">
<Button class="w-full" on:click={copyImageToClipboard}> <Button class="w-full" onclick={copyImageToClipboard}>
Copy Image Copy Image
</Button> </Button>
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger
<Button builders={[builder]} class="w-full">QR Link</Button> class={cn(buttonVariants({ variant: 'default' }), 'w-full')}>
QR Link
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
<DropdownMenu.Item href={`/url/${code}/qr`} target="_blank"> <DropdownMenu.Group>
Standard <DropdownMenu.Item href={`/url/${code}/qr`} target="_blank">
</DropdownMenu.Item> Standard
<DropdownMenu.Item </DropdownMenu.Item>
href={`/url/${code}/qr?color=true`} <DropdownMenu.Item
target="_blank"> href={`/url/${code}/qr?color=true`}
With Style target="_blank">
</DropdownMenu.Item> With Style
</DropdownMenu.Item>
</DropdownMenu.Group>
</DropdownMenu.Content> </DropdownMenu.Content>
</DropdownMenu.Root> </DropdownMenu.Root>
</div> </div>

6
frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/+page.svelte
Unescape Escape View File

@ -3,8 +3,10 @@
import type { PageData } from './$types' import type { PageData } from './$types'
import QR from './(components)/qr.svelte' import QR from './(components)/qr.svelte'
export let data: PageData let {
export let shallowRouting = false data,
shallowRouting,
}: { data: PageData; shallowRouting: boolean } = $props()
const url = const url =
data.project.enable_custom_domain && data.project.custom_domain data.project.enable_custom_domain && data.project.custom_domain

46
frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/DemoQR.svelte
Unescape Escape View File

@ -2,16 +2,25 @@
import { onMount } from 'svelte' import { onMount } from 'svelte'
import { browser } from '$app/environment' import { browser } from '$app/environment'
export let background = '#fff' let {
export let color = '#000' background = '#fff',
export let value = 'example.com/abcdefgh' color = '#000',
export let cornerSquareStyle: 'dot' | 'square' | 'extra-rounded' = value = 'example.com/abcdefgh',
'square' cornerSquareStyle = 'square',
export let dotStyle: 'square' | 'rounded' = 'square' dotStyle = 'square',
export let existingQrImage: string | null = null existingQrImage = null,
export let qrImage: File | null = null qrImage = null,
}: {
background: string
color: string
value: string
cornerSquareStyle: 'dot' | 'square' | 'extra-rounded'
dotStyle: 'square' | 'rounded'
existingQrImage: string | null
qrImage: File | null
} = $props()
let image = '' let image = $state('')
async function generateQrCode() { async function generateQrCode() {
if (!document || !window) { if (!document || !window) {
@ -58,13 +67,18 @@
} }
} }
$: browser && $effect(() => {
background && if (
color && browser &&
cornerSquareStyle && background &&
dotStyle && color &&
(qrImage === null || qrImage) && cornerSquareStyle &&
generateQrCode() dotStyle &&
(qrImage === null || qrImage)
) {
generateQrCode()
}
})
onMount(() => { onMount(() => {
generateQrCode() generateQrCode()

15
frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-info.svelte
Unescape Escape View File

@ -2,10 +2,17 @@
import * as Tabs from '$lib/components/ui/tabs/index.js' import * as Tabs from '$lib/components/ui/tabs/index.js'
import * as Card from '$lib/components/ui/card/index.js' import * as Card from '$lib/components/ui/card/index.js'
export let host: string let {
export let cname_record: string host,
export let a_record: string a_record,
export let aaaa_record: string aaaa_record,
cname_record,
}: {
host: string
cname_record: string
a_record: string
aaaa_record: string
} = $props()
const defaultValue = cname_record ? 'cname' : 'a' const defaultValue = cname_record ? 'cname' : 'a'
</script> </script>

18
frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-tooltip.svelte
Unescape Escape View File

@ -2,11 +2,19 @@
import * as Tooltip from '$lib/components/ui/tooltip/index.js' import * as Tooltip from '$lib/components/ui/tooltip/index.js'
import { InfoIcon } from 'lucide-svelte' import { InfoIcon } from 'lucide-svelte'
export let domain: string let {
export let custom_ip: string | null a_record,
export let cname_record: string aaaa_record,
export let a_record: string cname_record,
export let aaaa_record: string custom_ip,
domain,
}: {
domain: string
custom_ip: string | null
cname_record: string
a_record: string
aaaa_record: string
} = $props()
</script> </script>
<Tooltip.Root> <Tooltip.Root>

30
frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/form.svelte
Unescape Escape View File

@ -14,11 +14,17 @@
import DemoQr from './DemoQR.svelte' import DemoQr from './DemoQR.svelte'
import { cn } from '$lib/utils' import { cn } from '$lib/utils'
export let data: SuperValidated<Infer<FormSchema>> let {
export let qrImageBase64: string | null = null data,
export let isPro: boolean = false qrImageBase64 = null,
isPro = false,
}: {
data: SuperValidated<Infer<FormSchema>>
qrImageBase64: string | null
isPro: boolean
} = $props()
let qrImageInput: HTMLInputElement let qrImageInput: HTMLInputElement | undefined = $state()
const form = superForm(data, { const form = superForm(data, {
validators: zodClient(formSchema), validators: zodClient(formSchema),
@ -84,7 +90,7 @@
<div> <div>
{#if !$formData.qrImage && !qrImageBase64} {#if !$formData.qrImage && !qrImageBase64}
<button <button
on:click={(e) => { onclick={(e) => {
e.preventDefault() e.preventDefault()
qrImageInput.click() qrImageInput.click()
}}> }}>
@ -94,7 +100,7 @@
</button> </button>
{:else} {:else}
<button <button
on:click={(e) => { onclick={(e) => {
e.preventDefault() e.preventDefault()
qrImageInput.click() qrImageInput.click()
}}> }}>
@ -119,7 +125,7 @@
accept="image/png, image/jpeg" accept="image/png, image/jpeg"
type="file" type="file"
disabled={!isPro} disabled={!isPro}
on:input={(e) => { oninput={(e) => {
const file = e.currentTarget.files?.item(0) const file = e.currentTarget.files?.item(0)
if (!file) return if (!file) return
@ -147,7 +153,7 @@
<div class="flex gap-4"> <div class="flex gap-4">
<Button <Button
disabled={!isPro} disabled={!isPro}
on:click={() => ($formData.qrCornerSquareStyle = 'square')} onclick={() => ($formData.qrCornerSquareStyle = 'square')}
class={cn( class={cn(
'flex flex-col gap-3 border p-12', 'flex flex-col gap-3 border p-12',
$formData.qrCornerSquareStyle === 'square' $formData.qrCornerSquareStyle === 'square'
@ -159,7 +165,7 @@
</Button> </Button>
<Button <Button
disabled={!isPro} disabled={!isPro}
on:click={() => ($formData.qrCornerSquareStyle = 'dot')} onclick={() => ($formData.qrCornerSquareStyle = 'dot')}
class={cn( class={cn(
'flex flex-col gap-3 border p-12', 'flex flex-col gap-3 border p-12',
$formData.qrCornerSquareStyle === 'dot' $formData.qrCornerSquareStyle === 'dot'
@ -171,7 +177,7 @@
</Button> </Button>
<Button <Button
disabled={!isPro} disabled={!isPro}
on:click={() => onclick={() =>
($formData.qrCornerSquareStyle = 'extra-rounded')} ($formData.qrCornerSquareStyle = 'extra-rounded')}
class={cn( class={cn(
'flex flex-col gap-3 border p-12', 'flex flex-col gap-3 border p-12',
@ -199,7 +205,7 @@
<div class="flex gap-4"> <div class="flex gap-4">
<Button <Button
disabled={!isPro} disabled={!isPro}
on:click={() => ($formData.qrDotStyle = 'square')} onclick={() => ($formData.qrDotStyle = 'square')}
class={cn( class={cn(
'flex flex-col gap-3 border p-12', 'flex flex-col gap-3 border p-12',
$formData.qrDotStyle === 'square' $formData.qrDotStyle === 'square'
@ -211,7 +217,7 @@
</Button> </Button>
<Button <Button
disabled={!isPro} disabled={!isPro}
on:click={() => ($formData.qrDotStyle = 'rounded')} onclick={() => ($formData.qrDotStyle = 'rounded')}
class={cn( class={cn(
'flex flex-col gap-3 border p-12', 'flex flex-col gap-3 border p-12',
$formData.qrDotStyle === 'rounded' $formData.qrDotStyle === 'rounded'

10
frontend/src/routes/(app)/dashboard/projects/[id]/settings/+page.svelte
Unescape Escape View File

@ -26,9 +26,9 @@
import DnsInfo from './(components)/dns-info.svelte' import DnsInfo from './(components)/dns-info.svelte'
import DnsTooltip from './(components)/dns-tooltip.svelte' import DnsTooltip from './(components)/dns-tooltip.svelte'
export let data let { data } = $props()
let deleteDialogOpen = false let deleteDialogOpen = $state(false)
const form = superForm(data.deleteForm, { const form = superForm(data.deleteForm, {
invalidateAll: 'force', invalidateAll: 'force',
@ -211,7 +211,7 @@
Cancel Cancel
</Button> </Button>
</Dialog.Close> </Dialog.Close>
<Button on:click={enableCustomDomainSubmit}> <Button onclick={enableCustomDomainSubmit}>
{#if $enableCustomDomainSubmitting} {#if $enableCustomDomainSubmitting}
<LoaderCircle class="animate-spin" /> <LoaderCircle class="animate-spin" />
{/if} {/if}
@ -239,7 +239,7 @@
<AlertDialog.Footer> <AlertDialog.Footer>
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel> <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
<AlertDialog.Action <AlertDialog.Action
on:click={async () => { onclick={async () => {
await fetch('?/disable_custom_domain', { await fetch('?/disable_custom_domain', {
method: 'POST', method: 'POST',
headers: { headers: {
@ -368,7 +368,7 @@
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<Button <Button
variant="outline" variant="outline"
on:click={() => (deleteDialogOpen = false)}> onclick={() => (deleteDialogOpen = false)}>
Cancel Cancel
</Button> </Button>
<Form.Button variant="destructive" class="w-fit"> <Form.Button variant="destructive" class="w-fit">

8
frontend/src/routes/(app)/dashboard/settings/(components)/sidebar-nav.svelte
Unescape Escape View File

@ -2,8 +2,12 @@
import { cn } from '$lib/utils' import { cn } from '$lib/utils'
import { page } from '$app/stores' import { page } from '$app/stores'
import { Button } from '$lib/components/ui/button' import { Button } from '$lib/components/ui/button'
let className: string | undefined | null = undefined
export { className as class } let {
class: className = undefined,
}: {
class: string | undefined | null
} = $props()
const items = [ const items = [
{ {

2
frontend/src/routes/(app)/dashboard/settings/account/+page.svelte
Unescape Escape View File

@ -8,7 +8,7 @@
import { toast } from 'svelte-sonner' import { toast } from 'svelte-sonner'
import { LoaderCircle, CheckIcon, XIcon } from 'lucide-svelte' import { LoaderCircle, CheckIcon, XIcon } from 'lucide-svelte'
export let data let { data } = $props()
const form = superForm(data.form, { const form = superForm(data.form, {
validators: zodClient(formSchema), validators: zodClient(formSchema),

46
frontend/src/routes/(app)/dashboard/settings/qr/(components)/DemoQR.svelte
Unescape Escape View File

@ -2,16 +2,25 @@
import { onMount } from 'svelte' import { onMount } from 'svelte'
import { browser } from '$app/environment' import { browser } from '$app/environment'
export let background = '#fff' let {
export let color = '#000' background = '#fff',
export let value = 'abcdefghajskdadsj' color = '#000',
export let cornerSquareStyle: 'dot' | 'square' | 'extra-rounded' = value = 'abcdefghajskdadsj',
'square' cornerSquareStyle = 'square',
export let dotStyle: 'square' | 'rounded' = 'square' dotStyle = 'square',
export let existingQrImage: string | null = null existingQrImage = null,
export let qrImage: File | null = null qrImage = null,
}: {
background: string
color: string
value: string
cornerSquareStyle: 'dot' | 'square' | 'extra-rounded'
dotStyle: 'square' | 'rounded'
existingQrImage: string | null
qrImage: File | null
} = $props()
let image = '' let image = $state('')
async function generateQrCode() { async function generateQrCode() {
if (!document || !window) { if (!document || !window) {
@ -58,13 +67,18 @@
} }
} }
$: browser && $effect(() => {
background && if (
color && browser &&
cornerSquareStyle && background &&
dotStyle && color &&
(qrImage === null || qrImage) && cornerSquareStyle &&
generateQrCode() dotStyle &&
(qrImage === null || qrImage)
) {
generateQrCode()
}
})
onMount(() => { onMount(() => {
generateQrCode() generateQrCode()

19
frontend/src/routes/(app)/dashboard/settings/qr/+page.svelte
Unescape Escape View File

@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Separator } from '$lib/components/ui/separator' import { Separator } from '$lib/components/ui/separator'
import type { PageData } from './$types'
import * as Form from '$lib/components/ui/form' import * as Form from '$lib/components/ui/form'
import { Input } from '$lib/components/ui/input' import { Input } from '$lib/components/ui/input'
import { formSchema } from './schema' import { formSchema } from './schema'
@ -12,7 +11,7 @@
import { Button } from '$lib/components/ui/button' import { Button } from '$lib/components/ui/button'
import { cn } from '$lib/utils' import { cn } from '$lib/utils'
export let data: PageData let { data } = $props()
let qrImageInput: HTMLInputElement let qrImageInput: HTMLInputElement
@ -81,7 +80,7 @@
<div> <div>
{#if !$formData.qrImage && !data.qrImageBase64} {#if !$formData.qrImage && !data.qrImageBase64}
<button <button
on:click={(e) => { onclick={(e) => {
e.preventDefault() e.preventDefault()
qrImageInput.click() qrImageInput.click()
}}> }}>
@ -91,7 +90,7 @@
</button> </button>
{:else} {:else}
<button <button
on:click={(e) => { onclick={(e) => {
e.preventDefault() e.preventDefault()
qrImageInput.click() qrImageInput.click()
}}> }}>
@ -113,7 +112,7 @@
accept="image/png, image/jpeg" accept="image/png, image/jpeg"
type="file" type="file"
disabled={data.user.plan === 'free'} disabled={data.user.plan === 'free'}
on:input={(e) => { oninput={(e) => {
const file = e.currentTarget.files?.item(0) const file = e.currentTarget.files?.item(0)
if (!file) return if (!file) return
@ -141,7 +140,7 @@
<div class="flex gap-4"> <div class="flex gap-4">
<Button <Button
disabled={data.user.plan === 'free'} disabled={data.user.plan === 'free'}
on:click={() => ($formData.qrCornerSquareStyle = 'square')} onclick={() => ($formData.qrCornerSquareStyle = 'square')}
class={cn( class={cn(
'flex flex-col gap-3 border p-12', 'flex flex-col gap-3 border p-12',
$formData.qrCornerSquareStyle === 'square' $formData.qrCornerSquareStyle === 'square'
@ -153,7 +152,7 @@
</Button> </Button>
<Button <Button
disabled={data.user.plan === 'free'} disabled={data.user.plan === 'free'}
on:click={() => ($formData.qrCornerSquareStyle = 'dot')} onclick={() => ($formData.qrCornerSquareStyle = 'dot')}
class={cn( class={cn(
'flex flex-col gap-3 border p-12', 'flex flex-col gap-3 border p-12',
$formData.qrCornerSquareStyle === 'dot' $formData.qrCornerSquareStyle === 'dot'
@ -165,7 +164,7 @@
</Button> </Button>
<Button <Button
disabled={data.user.plan === 'free'} disabled={data.user.plan === 'free'}
on:click={() => onclick={() =>
($formData.qrCornerSquareStyle = 'extra-rounded')} ($formData.qrCornerSquareStyle = 'extra-rounded')}
class={cn( class={cn(
'flex flex-col gap-3 border p-12', 'flex flex-col gap-3 border p-12',
@ -193,7 +192,7 @@
<div class="flex gap-4"> <div class="flex gap-4">
<Button <Button
disabled={data.user.plan === 'free'} disabled={data.user.plan === 'free'}
on:click={() => ($formData.qrDotStyle = 'square')} onclick={() => ($formData.qrDotStyle = 'square')}
class={cn( class={cn(
'flex flex-col gap-3 border p-12', 'flex flex-col gap-3 border p-12',
$formData.qrDotStyle === 'square' $formData.qrDotStyle === 'square'
@ -205,7 +204,7 @@
</Button> </Button>
<Button <Button
disabled={data.user.plan === 'free'} disabled={data.user.plan === 'free'}
on:click={() => ($formData.qrDotStyle = 'rounded')} onclick={() => ($formData.qrDotStyle = 'rounded')}
class={cn( class={cn(
'flex flex-col gap-3 border p-12', 'flex flex-col gap-3 border p-12',
$formData.qrDotStyle === 'rounded' $formData.qrDotStyle === 'rounded'

6
frontend/src/routes/(app)/dashboard/settings/security/+page.svelte
Unescape Escape View File

@ -10,7 +10,7 @@
import * as Dialog from '$lib/components/ui/dialog' import * as Dialog from '$lib/components/ui/dialog'
import { Button } from '$lib/components/ui/button' import { Button } from '$lib/components/ui/button'
export let data let { data } = $props()
const form = superForm(data.form, { const form = superForm(data.form, {
validators: zodClient(changePasswordFormSchema), validators: zodClient(changePasswordFormSchema),
@ -28,7 +28,7 @@
const { form: formData, enhance, submitting } = form const { form: formData, enhance, submitting } = form
let deleteDialogOpen = false let deleteDialogOpen = $state(false)
const deleteAccountForm = superForm(data.deleteAccountForm, { const deleteAccountForm = superForm(data.deleteAccountForm, {
invalidateAll: 'force', invalidateAll: 'force',
@ -163,7 +163,7 @@
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<Button <Button
variant="outline" variant="outline"
on:click={() => (deleteDialogOpen = false)}> onclick={() => (deleteDialogOpen = false)}>
Cancel Cancel
</Button> </Button>
<Form.Button variant="destructive" class="w-fit"> <Form.Button variant="destructive" class="w-fit">

2
frontend/src/routes/(auth)/email-verification/[token]/+page.svelte
Unescape Escape View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { CheckCircle2Icon, XCircleIcon } from 'lucide-svelte' import { CheckCircle2Icon, XCircleIcon } from 'lucide-svelte'
import { Button } from '$lib/components/ui/button' import { Button } from '$lib/components/ui/button'
export let data let { data } = $props()
</script> </script>
<div <div

2
frontend/src/routes/(auth)/login/(components)/form.svelte
Unescape Escape View File

@ -11,7 +11,7 @@
import { toast } from 'svelte-sonner' import { toast } from 'svelte-sonner'
import { LoaderCircle } from 'lucide-svelte' import { LoaderCircle } from 'lucide-svelte'
export let data: SuperValidated<Infer<FormSchema>> let { data }: { data: SuperValidated<Infer<FormSchema>> } = $props()
const form = superForm(data, { const form = superForm(data, {
validators: zodClient(formSchema), validators: zodClient(formSchema),

5
frontend/src/routes/(auth)/login/+page.svelte
Unescape Escape View File

@ -2,14 +2,13 @@
import ThemeToggle from '$lib/components/theme-toggle.svelte' import ThemeToggle from '$lib/components/theme-toggle.svelte'
import Form from './(components)/form.svelte' import Form from './(components)/form.svelte'
import type { PageData } from './$types'
import { Button } from '$lib/components/ui/button' import { Button } from '$lib/components/ui/button'
import { LoaderIcon } from 'lucide-svelte' import { LoaderIcon } from 'lucide-svelte'
import Google from '$lib/components/icons/google.svelte' import Google from '$lib/components/icons/google.svelte'
export let data: PageData let { data } = $props()
let isLoading = false let isLoading = $state(false)
const loginGoogle = async () => { const loginGoogle = async () => {
// isLoading = true // isLoading = true

2
frontend/src/routes/(auth)/signup/(components)/form.svelte
Unescape Escape View File

@ -11,7 +11,7 @@
import { toast } from 'svelte-sonner' import { toast } from 'svelte-sonner'
import { LoaderCircle } from 'lucide-svelte' import { LoaderCircle } from 'lucide-svelte'
export let data: SuperValidated<Infer<FormSchema>> let { data }: { data: SuperValidated<Infer<FormSchema>> } = $props()
const form = superForm(data, { const form = superForm(data, {
validators: zodClient(formSchema), validators: zodClient(formSchema),

3
frontend/src/routes/(auth)/signup/+page.svelte
Unescape Escape View File

@ -1,9 +1,8 @@
<script lang="ts"> <script lang="ts">
import ThemeToggle from '$lib/components/theme-toggle.svelte' import ThemeToggle from '$lib/components/theme-toggle.svelte'
import Form from './(components)/form.svelte' import Form from './(components)/form.svelte'
import type { PageData } from './$types'
export let data: PageData let { data } = $props()
</script> </script>
<svelte:head> <svelte:head>

6
frontend/src/routes/(public)/url/[id]/qr/+page.svelte
Unescape Escape View File

@ -5,9 +5,9 @@
import { onMount } from 'svelte' import { onMount } from 'svelte'
import * as Card from '$lib/components/ui/card' import * as Card from '$lib/components/ui/card'
export let data let { data } = $props()
let image = '' let image = $state('')
const copyImageToClipboard = async () => { const copyImageToClipboard = async () => {
if (!image) return if (!image) return
@ -79,7 +79,7 @@
alt={data.url + '/' + data.shortenerId} alt={data.url + '/' + data.shortenerId}
width={300} width={300}
height={300} /> height={300} />
<Button class="w-full" on:click={copyImageToClipboard}> <Button class="w-full" onclick={copyImageToClipboard}>
Copy Image Copy Image
</Button> </Button>
</Card.Header> </Card.Header>

Write Preview
Loading…
Cancel
Save