youwen5/site
1
0
Fork 0
mirror of https://github.com/youwen5/site.git synced 2024-11-24 17:33:51 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add copy link button

Browse source
This commit is contained in:
Youwen Wu 2024-06-29 00:45:58 -07:00
parent e2751ca1dd
commit c575c5d6d3
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
1 changed files with 24 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/routes/portfolio/+page.svelte
View file

@ -1,8 +1,9 @@
<script> <script>
import { Button } from '$lib/components/ui/button' import { Button } from '$lib/components/ui/button'
import * as Card from '$lib/components/ui/card' import * as Card from '$lib/components/ui/card'
import { Code, Image } from 'svelte-radix' import { Code, Image, Link2 } from 'svelte-radix'
import Badge from '$lib/components/ui/badge/badge.svelte' import Badge from '$lib/components/ui/badge/badge.svelte'
import * as Tooltip from '$lib/components/ui/tooltip'
</script> </script>
<svelte:head> <svelte:head>
@ -25,8 +26,28 @@
<hr class="w-32 mt-1 h-1 bg-muted-foreground rounded-lg" /> <hr class="w-32 mt-1 h-1 bg-muted-foreground rounded-lg" />
<Card.Root class="p-0 md:p-6 mt-8"> <Card.Root class="p-0 md:p-6 mt-8">
<Card.Header> <Card.Header>
<Card.Title class="text-4xl font-serif tracking-normal font-medium">Jankboard</Card.Title> <span class="inline-flex items-center gap-2">
<div class="w-24 h-1 bg-green-800 dark:bg-green-400 rounded-lg" /> <Card.Title class="text-4xl font-serif tracking-normal font-medium" id="jankboard"
>Jankboard</Card.Title
>
<Tooltip.Root openDelay={300}>
<Tooltip.Trigger asChild let:builder>
<Button
on:click={() =>
navigator.clipboard.writeText(
window.location.origin + window.location.pathname + '#jankboard'
)}
builders={[builder]}
size="icon"
variant="ghost"><Link2 /></Button
>
</Tooltip.Trigger>
<Tooltip.Content>
<p>Copy link</p>
</Tooltip.Content>
</Tooltip.Root>
</span>
<div class="w-24 h-1 bg-blue-800 dark:bg-blue-400 rounded-lg" />
<div class="flex flex-wrap gap-2 py-2"> <div class="flex flex-wrap gap-2 py-2">
<Badge>Robotics</Badge> <Badge>Robotics</Badge>
<Badge variant="secondary">License: GPLv3</Badge> <Badge variant="secondary">License: GPLv3</Badge>