116 lines
2.1 KiB
Svelte
116 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { IconArrowNarrowRight } from '@tabler/icons-svelte';
|
|
export let feature: {
|
|
routeName: string;
|
|
routeId: string;
|
|
entryPoint: string;
|
|
};
|
|
</script>
|
|
|
|
<div class="link-wrapper">
|
|
<a href="/map/{feature.routeId}#{feature.entryPoint}" class="wide-button">
|
|
<div class="content">
|
|
<div class="header-row">
|
|
<span class="sub-text">Go to</span>
|
|
<span class="route-id-chip">{feature.routeId}</span>
|
|
</div>
|
|
<span class="main-text">{feature.routeName}</span>
|
|
</div>
|
|
|
|
<div class="icon-circle">
|
|
<IconArrowNarrowRight />
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<style>
|
|
.link-wrapper {
|
|
padding: 16px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.wide-button {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #ffffff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 16px;
|
|
text-decoration: none;
|
|
padding: 12px 16px;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.header-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.sub-text {
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
font-family: 'urwgothic';
|
|
color: #64748b;
|
|
}
|
|
|
|
.route-id-chip {
|
|
font-size: 0.6rem;
|
|
font-weight: 800;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
background: #f1f5f9;
|
|
color: #475569;
|
|
padding: 2px 6px;
|
|
border-radius: 6px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.main-text {
|
|
font-family: 'urwgothic';
|
|
font-size: 1rem;
|
|
font-weight: 800;
|
|
color: #0f172a;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.icon-circle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
color: #e1ebeb;
|
|
background-color: #3c6f79;
|
|
padding: 4px 4px;
|
|
border-radius: 999px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.wide-button:hover {
|
|
border-color: #cbd5e1;
|
|
background: #fdfdfd;
|
|
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
|
|
}
|
|
|
|
.wide-button:hover .icon-circle {
|
|
background-color: #404c55;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.wide-button:active {
|
|
transform: scale(0.98);
|
|
}
|
|
</style>
|