74 lines
2 KiB
Svelte
74 lines
2 KiB
Svelte
<script lang="ts">
|
|
import { inertia, page } from '@inertiajs/svelte';
|
|
import { globalState } from "@/Library/PassState.svelte";
|
|
import type {Snippet} from "svelte";
|
|
|
|
//eslint-disable-next-line
|
|
let { children }: { children: Snippet } = $props();
|
|
</script>
|
|
|
|
<div class="flex flex-col h-screen">
|
|
<div class="flex flex-grow overflow-hidden">
|
|
<nav class="flex flex-col w-2/12 items-center space-y-6 bg-zinc-800 px-10 py-6 text-white text-2xl">
|
|
<div class="rounded-lg bg-slate-700 px-4 py-1">{$page.props.appName}</div>
|
|
<a href="/" use:inertia class="hover:underline">Home</a>
|
|
</nav>
|
|
|
|
<main class="w-10/12 px-10 py-8 overflow-y-auto">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="mr-4">
|
|
{@render globalState.title?.()}
|
|
</div>
|
|
<div class="relative flex-grow">
|
|
<span class="material-icons text-gray-900 absolute left-3 top-1/2 transform -translate-y-1/2">search</span>
|
|
<input type="text" placeholder="Search..." class="w-full p-2 pl-10 rounded-full bg-gray-200 text-black" />
|
|
</div>
|
|
</div>
|
|
{@render children()}
|
|
</main>
|
|
</div>
|
|
|
|
<div class="relative w-full bg-zinc-800 text-white p-8 flex flex-col items-center">
|
|
<input
|
|
type="range"
|
|
class="absolute w-full h-4 bg-gray-700 appearance-none slider"
|
|
style="top: 0px;"
|
|
value="0"
|
|
/>
|
|
<div class="w-full flex items-center justify-between mt-2">
|
|
<div>Track Info</div>
|
|
<div>Player Controls</div>
|
|
<div>Volume Controls</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.slider {
|
|
height: 4px;
|
|
transition: height 0.3s ease;
|
|
padding: 0;
|
|
}
|
|
|
|
.slider:hover {
|
|
height: 4px;
|
|
}
|
|
|
|
.slider::-webkit-slider-thumb {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
.slider::-moz-range-thumb {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|