got a basic dashboard going
This commit is contained in:
@@ -0,0 +1,111 @@
|
||||
<script setup>
|
||||
import DashboardLayout from '../layouts/DashboardLayout.vue'
|
||||
|
||||
const stats = [
|
||||
{ label: "Today's Money", value: '$53,000', change: '+55%', positive: true, icon: 'weekend', gradient: 'primary' },
|
||||
{ label: "Today's Users", value: '2,300', change: '+3%', positive: true, icon: 'leaderboard',gradient: 'info' },
|
||||
{ label: 'New Clients', value: '+3,462', change: '-2%', positive: false,icon: 'store', gradient: 'success' },
|
||||
{ label: 'Sales', value: '$103,430',change: '+5%', positive: true, icon: 'person', gradient: 'danger' },
|
||||
]
|
||||
|
||||
const projects = [
|
||||
{ name: 'Material UI XD', budget: '$14,000', progress: 60, status: 'working' },
|
||||
{ name: 'Add Progress Track', budget: '$3,000', progress: 10, status: 'cancelled' },
|
||||
{ name: 'Fix Platform Errors',budget: 'Not set', progress: 100, status: 'done' },
|
||||
{ name: 'Launch Mobile App', budget: '$20,500', progress: 100, status: 'done' },
|
||||
{ name: 'Add the New Pricing',budget: '$500', progress: 25, status: 'working' },
|
||||
{ name: 'Redesign New Online',budget: '$2,000', progress: 40, status: 'cancelled' },
|
||||
]
|
||||
|
||||
const statusClass = {
|
||||
done: 'bg-success/10 text-success',
|
||||
working: 'bg-info/10 text-info',
|
||||
cancelled: 'bg-danger/10 text-danger',
|
||||
}
|
||||
|
||||
const gradientProgress = (value, gradient) => ({
|
||||
width: `${value}%`,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardLayout>
|
||||
<!-- Stat cards -->
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4 mt-6">
|
||||
<div
|
||||
v-for="stat in stats"
|
||||
:key="stat.label"
|
||||
class="rounded-2xl bg-white p-4 shadow-soft-md"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div
|
||||
class="-mt-10 flex h-16 w-16 shrink-0 items-center justify-center rounded-xl shadow-soft-md"
|
||||
:class="`bg-gradient-${stat.gradient} shadow-${stat.gradient}`"
|
||||
>
|
||||
<span class="material-icons text-3xl text-white">{{ stat.icon }}</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm font-medium text-secondary">{{ stat.label }}</p>
|
||||
<h4 class="text-2xl font-bold text-dark">{{ stat.value }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 border-t border-gray-100 pt-3">
|
||||
<p class="text-sm text-secondary">
|
||||
<span :class="stat.positive ? 'text-success' : 'text-danger'" class="font-medium">
|
||||
{{ stat.change }}
|
||||
</span>
|
||||
than last week
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projects table -->
|
||||
<div class="mt-6 rounded-2xl bg-white shadow-soft-md">
|
||||
<div class="flex items-center justify-between border-b border-gray-100 px-6 py-4">
|
||||
<h6 class="text-sm font-bold text-dark">Projects</h6>
|
||||
<p class="text-xs text-secondary">
|
||||
<span class="font-medium text-success">30 done</span> this month
|
||||
</p>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-100">
|
||||
<th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Project</th>
|
||||
<th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Budget</th>
|
||||
<th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Status</th>
|
||||
<th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Completion</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(p, i) in projects"
|
||||
:key="p.name"
|
||||
:class="i < projects.length - 1 ? 'border-b border-gray-100' : ''"
|
||||
>
|
||||
<td class="px-6 py-3 font-medium text-dark">{{ p.name }}</td>
|
||||
<td class="px-6 py-3 text-secondary">{{ p.budget }}</td>
|
||||
<td class="px-6 py-3">
|
||||
<span class="rounded-full px-2.5 py-1 text-xs font-medium capitalize" :class="statusClass[p.status]">
|
||||
{{ p.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="h-1.5 flex-1 overflow-hidden rounded-full bg-gray-200">
|
||||
<div
|
||||
class="h-full rounded-full bg-gradient-info"
|
||||
:style="{ width: `${p.progress}%` }"
|
||||
/>
|
||||
</div>
|
||||
<span class="w-8 shrink-0 text-right text-xs font-medium text-dark">{{ p.progress }}%</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup>
|
||||
import DashboardLayout from '../layouts/DashboardLayout.vue'
|
||||
|
||||
const groups = [
|
||||
{
|
||||
label: 'Navigation',
|
||||
icons: ['home','menu','close','arrow_back','arrow_forward','chevron_left','chevron_right',
|
||||
'expand_more','expand_less','more_vert','more_horiz','open_in_new','launch'],
|
||||
},
|
||||
{
|
||||
label: 'Actions',
|
||||
icons: ['add','edit','delete','save','search','filter_list','sort','share','download',
|
||||
'upload','copy_all','content_paste','refresh','sync'],
|
||||
},
|
||||
{
|
||||
label: 'Status & Feedback',
|
||||
icons: ['check_circle','error','warning','info','notifications','notification_important',
|
||||
'done','done_all','pending','hourglass_empty','lock','lock_open'],
|
||||
},
|
||||
{
|
||||
label: 'Content',
|
||||
icons: ['dashboard','table_view','text_fields','auto_awesome','map','bar_chart',
|
||||
'pie_chart','analytics','insights','summarize','article','description'],
|
||||
},
|
||||
{
|
||||
label: 'People & Social',
|
||||
icons: ['person','group','account_circle','face','supervised_user_circle',
|
||||
'person_add','logout','login','badge','contacts'],
|
||||
},
|
||||
{
|
||||
label: 'Media & Files',
|
||||
icons: ['image','photo','video_library','music_note','folder','folder_open',
|
||||
'attachment','cloud','cloud_upload','cloud_download','storage','backup'],
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardLayout>
|
||||
<div class="space-y-6">
|
||||
<div
|
||||
v-for="group in groups"
|
||||
:key="group.label"
|
||||
class="rounded-2xl bg-white p-6 shadow-soft-md"
|
||||
>
|
||||
<h6 class="mb-4 text-sm font-bold text-dark">{{ group.label }}</h6>
|
||||
<div class="grid grid-cols-4 gap-3 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 xl:grid-cols-13">
|
||||
<div
|
||||
v-for="icon in group.icons"
|
||||
:key="icon"
|
||||
class="group flex flex-col items-center gap-2 rounded-xl p-3 transition-all hover:bg-primary/5 hover:shadow-soft-xs cursor-default"
|
||||
:title="icon"
|
||||
>
|
||||
<span class="material-icons text-2xl text-secondary transition-colors group-hover:text-primary">
|
||||
{{ icon }}
|
||||
</span>
|
||||
<span class="w-full truncate text-center text-xs text-secondary group-hover:text-dark">
|
||||
{{ icon }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script setup>
|
||||
import DashboardLayout from '../layouts/DashboardLayout.vue'
|
||||
|
||||
const integrations = [
|
||||
{
|
||||
name: 'Google Maps',
|
||||
package: '@googlemaps/js-api-loader',
|
||||
description: 'Full-featured maps with Places, Directions, and Street View. Requires an API key.',
|
||||
docs: 'https://developers.google.com/maps/documentation/javascript',
|
||||
},
|
||||
{
|
||||
name: 'Mapbox GL JS',
|
||||
package: 'mapbox-gl',
|
||||
description: 'High-performance vector tile maps with rich customization and offline support.',
|
||||
docs: 'https://docs.mapbox.com/mapbox-gl-js/',
|
||||
},
|
||||
{
|
||||
name: 'Leaflet + vue-leaflet',
|
||||
package: '@vue-leaflet/vue-leaflet',
|
||||
description: 'Lightweight, open-source maps using OpenStreetMap tiles. No API key required.',
|
||||
docs: 'https://vue-leaflet.github.io/vue-leaflet/',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardLayout>
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- Placeholder map area -->
|
||||
<div class="relative overflow-hidden rounded-2xl bg-white shadow-soft-md">
|
||||
<div class="flex h-96 items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200">
|
||||
<!-- Grid lines to suggest a map -->
|
||||
<svg class="absolute inset-0 h-full w-full opacity-30" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#adb5bd" stroke-width="0.5"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#grid)" />
|
||||
</svg>
|
||||
|
||||
<!-- Simulated pin -->
|
||||
<div class="relative flex flex-col items-center">
|
||||
<div class="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-primary shadow-primary">
|
||||
<span class="material-icons text-2xl text-white">place</span>
|
||||
</div>
|
||||
<div class="-mt-1 h-3 w-px bg-primary" />
|
||||
<div class="mt-4 rounded-xl bg-white px-6 py-4 shadow-soft-lg text-center">
|
||||
<p class="text-sm font-bold text-dark">Map Integration</p>
|
||||
<p class="text-xs text-secondary">Mount your map library component here</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Integration options -->
|
||||
<div class="rounded-2xl bg-white p-6 shadow-soft-md">
|
||||
<h6 class="mb-1 text-sm font-bold text-dark">Recommended Integrations</h6>
|
||||
<p class="mb-6 text-xs text-secondary">
|
||||
Maps require a third-party library. Choose one and mount it inside
|
||||
<code class="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-xs text-primary">MapsView.vue</code>.
|
||||
</p>
|
||||
<div class="grid gap-4 sm:grid-cols-3">
|
||||
<div
|
||||
v-for="lib in integrations"
|
||||
:key="lib.name"
|
||||
class="rounded-xl border border-gray-200 p-4 transition-shadow hover:shadow-soft-sm"
|
||||
>
|
||||
<p class="font-semibold text-dark text-sm">{{ lib.name }}</p>
|
||||
<code class="mt-1 block text-xs text-secondary font-mono">{{ lib.package }}</code>
|
||||
<p class="mt-2 text-xs text-secondary leading-relaxed">{{ lib.description }}</p>
|
||||
<a
|
||||
:href="lib.docs"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="mt-3 inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline"
|
||||
>
|
||||
Docs <span class="material-icons text-xs leading-none">open_in_new</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,110 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import DashboardLayout from '../layouts/DashboardLayout.vue'
|
||||
|
||||
const dismissed = ref(new Set())
|
||||
|
||||
const alerts = [
|
||||
{ id: 1, type: 'success', icon: 'check_circle', title: 'Success', message: 'This is a success notification — something went well.' },
|
||||
{ id: 2, type: 'info', icon: 'info', title: 'Info', message: 'This is an info notification — just letting you know.' },
|
||||
{ id: 3, type: 'warning', icon: 'warning', title: 'Warning', message: 'This is a warning notification — you should take action.' },
|
||||
{ id: 4, type: 'danger', icon: 'error', title: 'Error', message: 'This is an error notification — something went wrong.' },
|
||||
]
|
||||
|
||||
const typeStyle = {
|
||||
success: 'bg-success text-white',
|
||||
info: 'bg-info text-white',
|
||||
warning: 'bg-warning text-white',
|
||||
danger: 'bg-danger text-white',
|
||||
}
|
||||
|
||||
const notifications = [
|
||||
{ id: 10, avatar: 'PC', color: 'primary', name: 'Patrick Collins', time: '13 minutes ago', text: 'New message in Design System channel' },
|
||||
{ id: 11, avatar: 'MR', color: 'info', name: 'Mikaela Ramos', time: '2 hours ago', text: 'Updated the icon grid component' },
|
||||
{ id: 12, avatar: 'TP', color: 'success', name: 'Tom Perez', time: 'Yesterday', text: 'Released v0.2.0 with table improvements' },
|
||||
{ id: 13, avatar: 'LC', color: 'warning', name: 'Lacina Cosmo', time: '2 days ago', text: 'Flagged a responsiveness issue on mobile' },
|
||||
{ id: 14, avatar: 'AM', color: 'danger', name: 'Ally Maria', time: 'Last week', text: 'Added font preload entries to index.html' },
|
||||
]
|
||||
|
||||
function dismiss(id) {
|
||||
dismissed.value.add(id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardLayout>
|
||||
<div class="grid gap-6 lg:grid-cols-2">
|
||||
|
||||
<!-- Dismissible alerts -->
|
||||
<div class="rounded-2xl bg-white p-6 shadow-soft-md">
|
||||
<h6 class="mb-1 text-sm font-bold text-dark">Alert States</h6>
|
||||
<p class="mb-6 text-xs text-secondary">Dismissible alerts for each semantic color</p>
|
||||
<div class="space-y-3">
|
||||
<transition-group name="alert">
|
||||
<div
|
||||
v-for="alert in alerts"
|
||||
v-show="!dismissed.has(alert.id)"
|
||||
:key="alert.id"
|
||||
class="flex items-start gap-3 rounded-lg p-4 text-sm font-medium"
|
||||
:class="typeStyle[alert.type]"
|
||||
>
|
||||
<span class="material-icons text-lg leading-none shrink-0">{{ alert.icon }}</span>
|
||||
<p class="flex-1">
|
||||
<span class="font-bold">{{ alert.title }} — </span>{{ alert.message }}
|
||||
</p>
|
||||
<button
|
||||
class="shrink-0 opacity-70 hover:opacity-100 transition-opacity"
|
||||
@click="dismiss(alert.id)"
|
||||
>
|
||||
<span class="material-icons text-lg leading-none">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notification feed -->
|
||||
<div class="rounded-2xl bg-white p-6 shadow-soft-md">
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<h6 class="text-sm font-bold text-dark">Recent Notifications</h6>
|
||||
<span class="rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary">
|
||||
{{ notifications.length }} new
|
||||
</span>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-for="n in notifications"
|
||||
:key="n.id"
|
||||
class="flex items-start gap-3"
|
||||
>
|
||||
<div
|
||||
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-xs font-bold text-white shadow-soft-sm"
|
||||
:class="`bg-gradient-${n.color} shadow-${n.color}`"
|
||||
>
|
||||
{{ n.avatar }}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-dark truncate">{{ n.name }}</p>
|
||||
<p class="text-xs text-secondary mt-0.5">{{ n.text }}</p>
|
||||
</div>
|
||||
<span class="shrink-0 text-xs text-secondary">{{ n.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.alert-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.alert-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(1rem);
|
||||
max-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<script setup>
|
||||
import DashboardLayout from '../layouts/DashboardLayout.vue'
|
||||
|
||||
const rows = [
|
||||
{ initials: 'OA', color: 'primary', name: 'Esthera Jackson', email: 'esthera@argon.com', role: 'Manager', org: 'Organization', online: true, date: '23/04/18' },
|
||||
{ initials: 'LB', color: 'info', name: 'Landon Brighton', email: 'landon@argon.com', role: 'Programator',org: 'Developer', online: false, date: '11/01/19' },
|
||||
{ initials: 'MR', color: 'success', name: 'Mikaela Ramos', email: 'mikaela@argon.com', role: 'Executive', org: 'Projects', online: true, date: '19/09/17' },
|
||||
{ initials: 'TP', color: 'warning', name: 'Tom Perez', email: 'tom@argon.com', role: 'Projects', org: 'Organization', online: true, date: '24/12/08' },
|
||||
{ initials: 'LC', color: 'danger', name: 'Lacina Cosmo', email: 'lacina@argon.com', role: 'Programator',org: 'Developer', online: false, date: '04/10/21' },
|
||||
{ initials: 'AM', color: 'secondary', name: 'Ally Maria', email: 'ally@argon.com', role: 'Manager', org: 'Executive', online: true, date: '14/03/20' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardLayout>
|
||||
<div class="rounded-2xl bg-white shadow-soft-md">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between border-b border-gray-100 px-6 py-4">
|
||||
<h6 class="text-sm font-bold text-dark">Authors Table</h6>
|
||||
<button class="rounded-lg bg-gradient-primary px-4 py-2 text-xs font-medium text-white shadow-primary hover:shadow-soft-md transition-shadow">
|
||||
+ New Entry
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-100">
|
||||
<th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Author</th>
|
||||
<th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Function</th>
|
||||
<th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Status</th>
|
||||
<th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Employed</th>
|
||||
<th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(row, i) in rows"
|
||||
:key="row.email"
|
||||
:class="i < rows.length - 1 ? 'border-b border-gray-100' : ''"
|
||||
>
|
||||
<!-- Author -->
|
||||
<td class="px-6 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-xs font-bold text-white shadow-soft-sm"
|
||||
:class="`bg-gradient-${row.color} shadow-${row.color}`"
|
||||
>
|
||||
{{ row.initials }}
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium text-dark">{{ row.name }}</p>
|
||||
<p class="text-xs text-secondary">{{ row.email }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Function -->
|
||||
<td class="px-6 py-3">
|
||||
<p class="font-medium text-dark">{{ row.role }}</p>
|
||||
<p class="text-xs text-secondary">{{ row.org }}</p>
|
||||
</td>
|
||||
|
||||
<!-- Status -->
|
||||
<td class="px-6 py-3">
|
||||
<span
|
||||
class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium"
|
||||
:class="row.online ? 'bg-success/10 text-success' : 'bg-gray-100 text-secondary'"
|
||||
>
|
||||
<span class="h-1.5 w-1.5 rounded-full" :class="row.online ? 'bg-success' : 'bg-gray-400'" />
|
||||
{{ row.online ? 'Online' : 'Offline' }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<!-- Employed -->
|
||||
<td class="px-6 py-3 text-secondary">{{ row.date }}</td>
|
||||
|
||||
<!-- Action -->
|
||||
<td class="px-6 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="text-xs font-medium text-info hover:underline">Edit</button>
|
||||
<button class="text-xs font-medium text-danger hover:underline">Delete</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,109 @@
|
||||
<script setup>
|
||||
import DashboardLayout from '../layouts/DashboardLayout.vue'
|
||||
|
||||
const headings = [
|
||||
{ tag: 'h1', label: 'h1. Heading', size: 'text-5xl', weight: 'font-light' },
|
||||
{ tag: 'h2', label: 'h2. Heading', size: 'text-4xl', weight: 'font-light' },
|
||||
{ tag: 'h3', label: 'h3. Heading', size: 'text-3xl', weight: 'font-normal' },
|
||||
{ tag: 'h4', label: 'h4. Heading', size: 'text-2xl', weight: 'font-normal' },
|
||||
{ tag: 'h5', label: 'h5. Heading', size: 'text-xl', weight: 'font-medium' },
|
||||
{ tag: 'h6', label: 'h6. Heading', size: 'text-base',weight: 'font-medium' },
|
||||
]
|
||||
|
||||
const weights = [
|
||||
{ label: 'Light 300', class: 'font-light', value: 300 },
|
||||
{ label: 'Regular 400',class: 'font-normal', value: 400 },
|
||||
{ label: 'Medium 500', class: 'font-medium', value: 500 },
|
||||
{ label: 'Bold 700', class: 'font-bold', value: 700 },
|
||||
{ label: 'Black 900', class: 'font-black', value: 900 },
|
||||
]
|
||||
|
||||
const colors = [
|
||||
{ label: 'Primary', class: 'text-primary' },
|
||||
{ label: 'Secondary', class: 'text-secondary' },
|
||||
{ label: 'Success', class: 'text-success' },
|
||||
{ label: 'Warning', class: 'text-warning' },
|
||||
{ label: 'Danger', class: 'text-danger' },
|
||||
{ label: 'Info', class: 'text-info' },
|
||||
{ label: 'Dark', class: 'text-dark' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardLayout>
|
||||
<div class="grid gap-6 lg:grid-cols-2">
|
||||
|
||||
<!-- Headings -->
|
||||
<div class="rounded-2xl bg-white p-6 shadow-soft-md">
|
||||
<h6 class="mb-1 text-sm font-bold text-dark">Headings</h6>
|
||||
<p class="mb-6 text-xs text-secondary">Roboto Variable — font-light through font-medium</p>
|
||||
<div class="space-y-3">
|
||||
<component
|
||||
:is="h.tag"
|
||||
v-for="h in headings"
|
||||
:key="h.tag"
|
||||
:class="[h.size, h.weight, 'text-dark leading-tight']"
|
||||
>
|
||||
{{ h.label }}
|
||||
</component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Font weights -->
|
||||
<div class="rounded-2xl bg-white p-6 shadow-soft-md">
|
||||
<h6 class="mb-1 text-sm font-bold text-dark">Font Weights</h6>
|
||||
<p class="mb-6 text-xs text-secondary">Roboto Variable covers 100–900 in a single file</p>
|
||||
<div class="space-y-4">
|
||||
<div v-for="w in weights" :key="w.value">
|
||||
<p class="mb-0.5 text-xs text-secondary">{{ w.label }}</p>
|
||||
<p class="text-xl text-dark" :class="w.class">
|
||||
The quick brown fox jumps over the lazy dog
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body & UI text -->
|
||||
<div class="rounded-2xl bg-white p-6 shadow-soft-md">
|
||||
<h6 class="mb-1 text-sm font-bold text-dark">Body & UI Text</h6>
|
||||
<p class="mb-6 text-xs text-secondary">Scale used across components</p>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<p class="mb-1 text-xs text-secondary">text-base (1rem) — body</p>
|
||||
<p class="text-base text-dark">Design systems give teams a shared language for building consistent, scalable products.</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-1 text-xs text-secondary">text-sm (0.875rem) — UI labels</p>
|
||||
<p class="text-sm text-dark">Design systems give teams a shared language for building consistent, scalable products.</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-1 text-xs text-secondary">text-xs (0.75rem) — captions, meta</p>
|
||||
<p class="text-xs text-secondary">Design systems give teams a shared language for building consistent, scalable products.</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-1 text-xs text-secondary">Inline elements</p>
|
||||
<p class="text-sm text-dark">
|
||||
Regular text with <strong>bold emphasis</strong>, <em>italic style</em>,
|
||||
and <code class="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-xs text-primary">inline code</code> fragments.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text colors -->
|
||||
<div class="rounded-2xl bg-white p-6 shadow-soft-md">
|
||||
<h6 class="mb-1 text-sm font-bold text-dark">Semantic Text Colors</h6>
|
||||
<p class="mb-6 text-xs text-secondary">All map to @theme --color-* tokens</p>
|
||||
<div class="space-y-3">
|
||||
<div v-for="c in colors" :key="c.label" class="flex items-center gap-4">
|
||||
<span class="w-20 shrink-0 text-xs text-secondary">{{ c.label }}</span>
|
||||
<p class="text-sm font-medium" :class="c.class">
|
||||
The quick brown fox jumps over the lazy dog
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user