Match dashboard header and shell layout to the Mento mockup.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,133 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
name:
|
||||
| 'home'
|
||||
| 'users'
|
||||
| 'briefcase'
|
||||
| 'check'
|
||||
| 'box'
|
||||
| 'chart'
|
||||
| 'settings'
|
||||
| 'search'
|
||||
| 'sparkle'
|
||||
| 'bell'
|
||||
| 'calendar'
|
||||
| 'mail'
|
||||
| 'megaphone'
|
||||
| 'send'
|
||||
| 'fire'
|
||||
| 'warning'
|
||||
| 'trend'
|
||||
| 'phone'
|
||||
| 'trophy';
|
||||
size?: number;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
class="ico"
|
||||
:width="size ?? 20"
|
||||
:height="size ?? 20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<template v-if="name === 'home'">
|
||||
<path d="M3 10.5 12 3l9 7.5" />
|
||||
<path d="M5 9.5V21h14V9.5" />
|
||||
<path d="M10 21v-6h4v6" />
|
||||
</template>
|
||||
<template v-else-if="name === 'users'">
|
||||
<circle cx="9" cy="8" r="3.2" />
|
||||
<path d="M2.5 19c.8-3 2.9-4.5 6.5-4.5s5.7 1.5 6.5 4.5" />
|
||||
<circle cx="17" cy="9" r="2.4" />
|
||||
<path d="M15.2 14.2c2.3.3 3.9 1.5 4.8 3.8" />
|
||||
</template>
|
||||
<template v-else-if="name === 'briefcase'">
|
||||
<rect x="3" y="7" width="18" height="13" rx="2" />
|
||||
<path d="M8 7V5.5A1.5 1.5 0 0 1 9.5 4h5A1.5 1.5 0 0 1 16 5.5V7" />
|
||||
<path d="M3 12h18" />
|
||||
</template>
|
||||
<template v-else-if="name === 'check'">
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="m8.5 12.5 2.4 2.4 4.6-5" />
|
||||
</template>
|
||||
<template v-else-if="name === 'box'">
|
||||
<path d="M12 3 3.5 7.5v9L12 21l8.5-4.5v-9L12 3Z" />
|
||||
<path d="M12 12 3.5 7.5M12 12l8.5-4.5M12 12v9" />
|
||||
</template>
|
||||
<template v-else-if="name === 'chart'">
|
||||
<path d="M4 19h16" />
|
||||
<path d="M7 16V10" />
|
||||
<path d="M12 16V6" />
|
||||
<path d="M17 16v-4" />
|
||||
</template>
|
||||
<template v-else-if="name === 'settings'">
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9c.3.6.9 1 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z" />
|
||||
</template>
|
||||
<template v-else-if="name === 'search'">
|
||||
<circle cx="11" cy="11" r="7" />
|
||||
<path d="m20 20-3.5-3.5" />
|
||||
</template>
|
||||
<template v-else-if="name === 'sparkle'">
|
||||
<path d="M12 3v4M12 17v4M3 12h4M17 12h4" />
|
||||
<path d="m6.5 6.5 2.5 2.5M15 15l2.5 2.5M17.5 6.5 15 9M9 15l-2.5 2.5" />
|
||||
<circle cx="12" cy="12" r="2.2" />
|
||||
</template>
|
||||
<template v-else-if="name === 'bell'">
|
||||
<path d="M6 9a6 6 0 1 1 12 0c0 4 1.5 5.5 1.5 5.5H4.5S6 13 6 9Z" />
|
||||
<path d="M10 19a2 2 0 0 0 4 0" />
|
||||
</template>
|
||||
<template v-else-if="name === 'calendar'">
|
||||
<rect x="3.5" y="5" width="17" height="15" rx="2" />
|
||||
<path d="M8 3.5V7M16 3.5V7M3.5 10h17" />
|
||||
</template>
|
||||
<template v-else-if="name === 'mail'">
|
||||
<rect x="3" y="5" width="18" height="14" rx="2" />
|
||||
<path d="m4 7 8 6 8-6" />
|
||||
</template>
|
||||
<template v-else-if="name === 'megaphone'">
|
||||
<path d="M3 11v2a2 2 0 0 0 2 2h1l4 4V5L6 9H5a2 2 0 0 0-2 2Z" />
|
||||
<path d="M14 8.5c2 .8 3.5 2.3 3.5 3.5s-1.5 2.7-3.5 3.5" />
|
||||
<path d="M10 15v3a2 2 0 0 1-2 2" />
|
||||
</template>
|
||||
<template v-else-if="name === 'send'">
|
||||
<path d="m4 12 16-8-6 16-2.5-6.5L4 12Z" />
|
||||
</template>
|
||||
<template v-else-if="name === 'fire'">
|
||||
<path d="M12 3c2 3-1 4 1 7 1.5 2.2 4 2.5 4 6a5 5 0 1 1-10 0c0-3.5 2-5 3-7 1-2-1-4 2-6Z" />
|
||||
</template>
|
||||
<template v-else-if="name === 'warning'">
|
||||
<path d="m12 4 9 16H3L12 4Z" />
|
||||
<path d="M12 10v4" />
|
||||
<path d="M12 17h.01" />
|
||||
</template>
|
||||
<template v-else-if="name === 'trend'">
|
||||
<path d="M4 17 10 11l4 4 6-8" />
|
||||
<path d="M15 7h5v5" />
|
||||
</template>
|
||||
<template v-else-if="name === 'phone'">
|
||||
<path d="M8 3.5h2.5l1 4-2 1.2a12 12 0 0 0 5.8 5.8L16.5 12.5l4 1V16a2 2 0 0 1-2.2 2A16 16 0 0 1 4 6.2 2 2 0 0 1 6 4Z" />
|
||||
</template>
|
||||
<template v-else-if="name === 'trophy'">
|
||||
<path d="M8 21h8" />
|
||||
<path d="M12 17v4" />
|
||||
<path d="M7 4h10v4a5 5 0 0 1-10 0V4Z" />
|
||||
<path d="M7 6H4.5A2.5 2.5 0 0 0 7 8.5" />
|
||||
<path d="M17 6h2.5A2.5 2.5 0 0 1 17 8.5" />
|
||||
</template>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ico {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user