pesde-pkg/pesde
1
1
Fork 0
mirror of https://github.com/pesde-pkg/pesde.git synced 2025-05-04 10:33:47 +01:00
Code Issues Projects Releases Packages Wiki Activity

feat(website): add target select menu

Browse source
This commit is contained in:
LukaDev 2024-08-18 19:06:47 +02:00
parent be11b15f2f
commit a4d8dafecd
1 changed files with 44 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte
View file

@ -1,7 +1,9 @@
<script lang="ts"> <script lang="ts">
import { formatDistanceToNow } from "date-fns" import { formatDistanceToNow } from "date-fns"
import { Check, Clipboard } from "lucide-svelte" import { Check, ChevronDownIcon, Clipboard } from "lucide-svelte"
import Tab from "./Tab.svelte" import Tab from "./Tab.svelte"
import { page } from "$app/stores"
import { goto } from "$app/navigation"
let { children, data } = $props() let { children, data } = $props()
@ -10,6 +12,19 @@
const [scope, name] = data.pkg.name.split("/") const [scope, name] = data.pkg.name.split("/")
const installCommand = `pesde add ${data.pkg.name}` const installCommand = `pesde add ${data.pkg.name}`
const defaultTarget = $derived(
"target" in $page.params ? $page.params.target : data.pkg.targets[0].kind,
)
const basePath = $derived.by(() => {
const { scope, name } = $page.params
if ("target" in $page.params) {
const { version } = $page.params
return `/packages/${scope}/${name}/${version}`
}
return `/packages/${scope}/${name}/latest`
})
</script> </script>
<div class="mx-auto flex max-w-screen-lg px-4 py-16"> <div class="mx-auto flex max-w-screen-lg px-4 py-16">
@ -39,7 +54,7 @@
</div> </div>
<aside class="ml-auto w-full max-w-[22rem] flex-shrink-0 border-l pl-4"> <aside class="ml-auto w-full max-w-[22rem] flex-shrink-0 border-l pl-4">
<h2 class="mb-1 text-lg font-semibold text-heading">Install</h2> <h2 class="mb-1 text-lg font-semibold text-heading">Install</h2>
<div class="flex h-11 items-center overflow-hidden rounded border text-sm"> <div class="mb-4 flex h-11 items-center overflow-hidden rounded border text-sm">
<code class="truncate px-4">{installCommand}</code> <code class="truncate px-4">{installCommand}</code>
<button <button
class="ml-auto flex size-11 items-center justify-center border-l bg-card/40 hover:bg-card/60" class="ml-auto flex size-11 items-center justify-center border-l bg-card/40 hover:bg-card/60"
@ -61,5 +76,32 @@
{/if} {/if}
</button> </button>
</div> </div>
<h2 class="mb-1 text-lg font-semibold text-heading">
<label for="target-select">Target</label>
</h2>
<div
class="relative flex h-11 w-full items-center rounded border border-input-border bg-input-bg ring-0 ring-primary-bg/20 transition focus-within:border-primary focus-within:ring-4 has-[:disabled]:opacity-50"
>
<select
class="absolute inset-0 appearance-none bg-transparent px-4 outline-none"
id="target-select"
onchange={(e) => {
const select = e.currentTarget
select.disabled = true
goto(`${basePath}/${e.currentTarget.value}`).finally(() => {
select.disabled = false
})
}}
>
{#each data.pkg.targets as target}
<option value={target.kind} class="bg-card" selected={target.kind === defaultTarget}>
{target.kind[0].toUpperCase() + target.kind.slice(1)}
</option>
{/each}
</select>
<ChevronDownIcon class="pointer-events-none absolute right-4 h-5 w-5" />
</div>
</aside> </aside>
</div> </div>