66 lines
2.3 KiB
Vue
66 lines
2.3 KiB
Vue
<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>
|