44 lines
No EOL
1.4 KiB
Vue
44 lines
No EOL
1.4 KiB
Vue
<template>
|
|
<section>
|
|
<div class="inner text-center">
|
|
|
|
<h1>Components</h1>
|
|
<p>All available components in Synergy.</p>
|
|
|
|
<div class="component-grid">
|
|
<NuxtLink v-for="c in components" :to="`/components/${c.url}`">
|
|
<Icon :name="c.icon" />
|
|
<h3>{{ c.title }}</h3>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
let components = [
|
|
{url: "button", title: "Button", icon: "mdi:button-cursor"},
|
|
{url: "input", title: "Input", icon: "mdi:form-textbox"},
|
|
{url: "select", title: "Select", icon: "mdi:form-select"},
|
|
{url: "textarea", title: "Textarea", icon: "mdi:card-text-outline"},
|
|
{url: "toggle", title: "Toggle", icon: "mdi:toggle-switch-off-outline"},
|
|
{url: "radio", title: "Radio", icon: "mdi:radiobox-marked"},
|
|
{url: "checkbox", title: "Checkbox", icon: "mdi:checkbox-outline"},
|
|
{url: "tabs", title: "Tabs", icon: "ic:baseline-tab"}
|
|
];
|
|
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.component-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 70px 0;}
|
|
|
|
.component-grid > * {display: flex; flex-direction: column; align-items: center; border: var(--synergy-border-width) solid var(--synergy-border); border-radius: var(--synergy-border-radius); padding: 20px; gap: 10px; text-decoration: none;}
|
|
.component-grid > *:hover {border-color: var(--synergy-border-active);}
|
|
|
|
.component-grid .iconify {font-size: 24px;}
|
|
.component-grid > * > * {margin: 0;}
|
|
|
|
</style> |