diff options
Diffstat (limited to 'src/components/AppHeader.svelte')
| -rw-r--r-- | src/components/AppHeader.svelte | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte new file mode 100644 index 00000000..580f442f --- /dev/null +++ b/src/components/AppHeader.svelte @@ -0,0 +1,26 @@ +<script> + import { goto } from '$app/navigation'; + import { Icon } from '$comp'; +</script> + +<header class="bg-gradient-to-r from-primary to-gradient h-[20vh] w-full relative"> + <nav class="flex justify-end items-center space-x-4 p-5"> + <button class="bg-white p-2 rounded-full w-12 h-12" on:click={() => goto('/receive')} + ><Icon icon="numpad" style="mx-auto" /></button + > + <button class="bg-white p-2 rounded-full w-12 h-12" + ><Icon icon="clock" style="mx-auto" /></button + > + <button class="bg-white p-2 rounded-full w-12 h-12" + ><Icon icon="menu" style="mx-auto" /></button + > + <button class="bg-white p-2 rounded-full w-12 h-12" + ><Icon icon="profile" style="mx-auto" /></button + > + </nav> + <div + class="absolute top-[calc(20vh-48px)] left-[calc(50vw-48px)] rounded-full border-4 border-white p-4 bg-gradient-to-r from-primary to-gradient w-24 h-24" + > + <Icon icon="logo-symbol-white" style="mx-auto" /> + </div> +</header> |