[refac] Replace <a> with Link and button for Quick Links
This commit is contained in:
Karen Chen
@@ -1,14 +1,29 @@
|
||||
<script lang="ts">
|
||||
let { children, onclick = null } = $props();
|
||||
type ButtonSize = 'sm' | 'md' | 'lg';
|
||||
|
||||
let {
|
||||
children,
|
||||
onclick = null,
|
||||
disabled = false,
|
||||
size = 'md' as ButtonSize,
|
||||
class: className = ''
|
||||
} = $props();
|
||||
|
||||
const sizeClasses: Record<ButtonSize, string> = {
|
||||
sm: 'px-3 py-1.5',
|
||||
md: 'px-4 py-2',
|
||||
lg: 'px-2 py-2'
|
||||
};
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="bg-ecsess-600 hover:bg-ecsess-500 active:bg-ecsess-700
|
||||
inline-block rounded-md border-none px-4
|
||||
py-2 text-white transition-all
|
||||
duration-200 ease-out
|
||||
hover:scale-105 hover:shadow-xl"
|
||||
{onclick}
|
||||
disabled={disabled}
|
||||
onclick={onclick}
|
||||
class="rounded-md border border-ecsess-200 bg-ecsess-500
|
||||
{sizeClasses[size]}
|
||||
text-sm font-semibold text-ecsess-50 transition-colors
|
||||
hover:bg-ecsess-600/50 hover:border-ecsess-300
|
||||
disabled:pointer-events-none disabled:opacity-50 {className}"
|
||||
>
|
||||
{@render children()}
|
||||
{@render children?.()}
|
||||
</button>
|
||||
|
||||
@@ -1,7 +1,24 @@
|
||||
<script>
|
||||
let { href = 'https://www.example.com', children } = $props();
|
||||
<script lang="ts">
|
||||
let {
|
||||
href = undefined,
|
||||
external = false,
|
||||
button = false,
|
||||
children,
|
||||
class: className = ''
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<a {href} target="_blank" rel="noopener noreferrer" class="underline">
|
||||
{@render children()}
|
||||
</a>
|
||||
{#if href}
|
||||
<a
|
||||
href={href}
|
||||
class="{button ? '' : 'underline'} {className}"
|
||||
target={external ? '_blank' : undefined}
|
||||
rel={external ? 'noopener noreferrer' : undefined}
|
||||
>
|
||||
{@render children?.()}
|
||||
</a>
|
||||
{:else}
|
||||
<span class={className}>
|
||||
{@render children?.()}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
23
src/components/QuickLinks.svelte
Normal file
23
src/components/QuickLinks.svelte
Normal file
@@ -0,0 +1,23 @@
|
||||
<script lang="ts">
|
||||
import Link from 'components/Link.svelte';
|
||||
import Button from 'components/Button.svelte';
|
||||
</script>
|
||||
|
||||
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<Link href="/events" button>
|
||||
<Button class="w-full">ECSESS Events</Button>
|
||||
</Link>
|
||||
|
||||
<Link href="/r/trot5th" external button>
|
||||
<Button class="w-full">Trottier 5th booking</Button>
|
||||
</Link>
|
||||
|
||||
<Link href="/r/ctrlz" external button>
|
||||
<Button size="lg" class="w-full">Ctrl+Z (feedback) form</Button>
|
||||
</Link>
|
||||
|
||||
<!-- Sponsorship disabled -->
|
||||
<Link button>
|
||||
<Button disabled class="w-full">Sponsorship</Button>
|
||||
</Link>
|
||||
</div>
|
||||
@@ -7,6 +7,7 @@
|
||||
import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
|
||||
import AffiliatedClubs from 'components/homepage/AffiliatedClubs.svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import QuickLinks from 'components/QuickLinks.svelte';
|
||||
|
||||
/** loading things from the server side */
|
||||
let { data } = $props();
|
||||
@@ -33,56 +34,18 @@
|
||||
<RichText value={data.description} />
|
||||
</div>
|
||||
|
||||
<!-- Quick Links (Desktop only) -->
|
||||
<!-- Quick Links (Desktop) -->
|
||||
<div class="hidden lg:block p-4">
|
||||
<!-- Quick Links -->
|
||||
<div class="mt-6">
|
||||
<p
|
||||
class="mt-8 mb-4 text-center text-base font-bold tracking-wide
|
||||
text-ecsess-50
|
||||
underline decoration-ecsess-200 decoration-2 underline-offset-8
|
||||
drop-shadow-[0_6px_24px_rgba(0,0,0,0.75)]"
|
||||
>Commonly searched for
|
||||
>
|
||||
Commonly searched for
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<a
|
||||
href="/events"
|
||||
class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
|
||||
text-center text-sm font-semibold text-ecsess-50 transition-colors
|
||||
hover:bg-ecsess-600/50 hover:border-ecsess-300"
|
||||
>ECSESS Events
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/r/trot5th"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
|
||||
text-center text-sm font-semibold text-ecsess-50 transition-colors
|
||||
hover:bg-ecsess-600/50 hover:border-ecsess-300"
|
||||
>Trottier 5th booking
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/r/ctrlz"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="rounded-md border border-ecsess-200 bg-ecsess-500 px-2 py-2
|
||||
text-center text-sm font-semibold text-ecsess-50 transition-colors
|
||||
hover:bg-ecsess-600/50 hover:border-ecsess-300"
|
||||
>Ctrl+Z (feedback) form
|
||||
</a>
|
||||
|
||||
<a
|
||||
aria-disabled="true"
|
||||
tabindex="-1"
|
||||
class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
|
||||
text-center text-sm font-semibold text-ecsess-50 transition-colors
|
||||
hover:bg-ecsess-600/50 hover:border-ecsess-300"
|
||||
>Sponsorship
|
||||
</a>
|
||||
</div>
|
||||
<QuickLinks />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,7 +53,7 @@
|
||||
|
||||
<!-- Image -->
|
||||
<div class="order-2 m-2 lg:order-2 lg:col-span-2 lg:mx-12 lg:my-0">
|
||||
<div class="lg:sticky lg:top-16 lg:h-[calc(100vh-7rem)] lg:flex lg:items-center lg:justify-center">
|
||||
<div class="lg:top-16 lg:h-[calc(100vh-7rem)] lg:flex lg:items-center lg:justify-center">
|
||||
<img
|
||||
src={data.councilPhoto}
|
||||
alt="ECSESS Council"
|
||||
@@ -99,56 +62,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<!-- Quick Links (mobile) -->
|
||||
<div class="order-3 p-4 lg:hidden">
|
||||
<!-- Quick Links -->
|
||||
<div class="mt-6">
|
||||
<p
|
||||
class="mt-8 mb-4 text-center text-base font-bold tracking-wide
|
||||
text-ecsess-50
|
||||
underline decoration-ecsess-200 decoration-2 underline-offset-8
|
||||
drop-shadow-[0_6px_24px_rgba(0,0,0,0.75)]"
|
||||
>Commonly searched for
|
||||
>
|
||||
Commonly searched for
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<a
|
||||
href="/events"
|
||||
class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
|
||||
text-center text-sm font-semibold text-ecsess-50 transition-colors
|
||||
hover:bg-ecsess-600/50 hover:border-ecsess-300"
|
||||
>ECSESS Events
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/r/trot5th"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
|
||||
text-center text-sm font-semibold text-ecsess-50 transition-colors
|
||||
hover:bg-ecsess-600/50 hover:border-ecsess-300"
|
||||
>Trottier 5th booking
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/r/ctrlz"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="rounded-md border border-ecsess-200 bg-ecsess-500 px-2 py-2
|
||||
text-center text-sm font-semibold text-ecsess-50 transition-colors
|
||||
hover:bg-ecsess-600/50 hover:border-ecsess-300"
|
||||
>Ctrl+Z (feedback) form
|
||||
</a>
|
||||
|
||||
<a
|
||||
aria-disabled="true"
|
||||
tabindex="-1"
|
||||
class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
|
||||
text-center text-sm font-semibold text-ecsess-50 transition-colors
|
||||
hover:bg-ecsess-600/50 hover:border-ecsess-300"
|
||||
>Sponsorship
|
||||
</a>
|
||||
</div>
|
||||
<QuickLinks />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user