Nous components

This commit is contained in:
Pau Figueras 2024-03-11 19:23:04 +01:00
pare da17c2bf89
commit 0bc0cad4dc
S'han modificat 7 arxius amb 43 adicions i 5 eliminacions

Veure arxiu

@ -5,10 +5,13 @@
export let headerImage: string | null = null;
export let imageDesc: string = '';
</script>
<div class="mx-auto my-5 w-[60%]">
<div class="my-5">
{#if headerImage}
<Image {headerImage} {imageDesc}/>
{/if}
<p class='text-5xl'>About {who}</p>
<h1 class='text-5xl'>About {who}</h1>
<div class="grid grid-cols-1 gap-y-3 my-3">
<hr>
<slot />
</div>
</div>

4
src/lib/code.svelte Normal file
Veure arxiu

@ -0,0 +1,4 @@
<code class="bg-neutral-200 dark:bg-neutral-950 px-2 py-1 rounded">
<slot/>
</code>

18
src/lib/link.svelte Normal file
Veure arxiu

@ -0,0 +1,18 @@
<script lang="ts">
import { type LinkHref, type LinkReferrer, type LinkTarget, type LinkText, type LinkUnderline } from "$lib/types/link"
import Code from "./code.svelte";
export let link: LinkHref;
export let text: LinkText;
export let target: LinkTarget = '_self';
export let referrer: LinkReferrer = 'no-referrer';
export let underline: LinkUnderline = undefined;
export let asCode: boolean = false;
</script>
<a href={link} target="{target}" referrerpolicy="{referrer}" class:hover:underline={underline === 'hover'} class:underline={underline === true} >
{#if asCode}
<Code>{text}</Code>
{:else}
{text}
{/if}
</a>

Veure arxiu

@ -2,10 +2,10 @@
export let menudata: {menuName: string, menuLink: string}[] = [];
$: colNum = (Math.floor(menudata.length / 2) < 3) ? Math.floor(menudata.length / 2) : 3;
</script>
<div class="w-[60%] grid gap-y-6 gap-x-6 grid-cols-{colNum} text-center mx-auto py-5 sm:grid-cols-1 justify-content-center">
<div class="grid gap-y-6 gap-x-6 grid-cols-{colNum} text-center sm:grid-cols-1 justify-content-center">
{#each menudata as menu}
<a href="{menu.menuLink}" target="_self">
<div class="flex content-center justify-center border rounded-md border-white border-solid px-6 py-8 dark:hover:bg-zinc-900 dark:bg-transparent bg-transparent min-w-[50%]">
<div class="flex content-center justify-center border rounded-md border-black dark:border-white border-solid px-6 py-8 dark:hover:bg-zinc-900 dark:bg-transparent bg-transparent min-w-[50%]">
<h2 class='text-xl'>{menu.menuName}</h2>
</div>
</a>

4
src/lib/title.svelte Normal file
Veure arxiu

@ -0,0 +1,4 @@
<script lang="ts">
export let title: string;
</script>
<h1 class="text-5xl mb-5 font-semibold">{title}</h1>

5
src/lib/types/link.ts Normal file
Veure arxiu

@ -0,0 +1,5 @@
export type LinkUnderline = boolean | 'hover' | undefined;
export type LinkTarget = '_blank' | '_self' | undefined;
export type LinkReferrer = 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | undefined;
export type LinkText = string;
export type LinkHref = string;

4
src/lib/ubication.svelte Normal file
Veure arxiu

@ -0,0 +1,4 @@
<svelte:head>
<script src="https://kit.fontawesome.com/c20c99c16a.js" crossorigin="anonymous"></script>
</svelte:head>
<span><slot/> <span class="fa-solid fa-location-dot"></span></span>