adding a profile page
This commit is contained in:
@@ -65,13 +65,17 @@ const pageTitle = computed(() => route.meta.title ?? '')
|
||||
<!-- Footer -->
|
||||
<div class="mx-4 border-t border-white/20" />
|
||||
<div class="space-y-0.5 px-4 py-4">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-white/60 transition-all hover:bg-white/10 hover:text-white"
|
||||
<RouterLink
|
||||
to="/profile"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200"
|
||||
:class="isActive('/profile')
|
||||
? 'bg-gradient-primary shadow-primary text-white'
|
||||
: 'text-white/60 hover:bg-white/10 hover:text-white'"
|
||||
@click="sidebarOpen = false"
|
||||
>
|
||||
<span class="material-icons text-lg leading-none">person</span>
|
||||
Profile
|
||||
</a>
|
||||
</RouterLink>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-white/60 transition-all hover:bg-white/10 hover:text-white"
|
||||
|
||||
@@ -10,5 +10,6 @@ export default createRouter({
|
||||
{ path: '/icons', component: () => import('../views/IconsView.vue'), meta: { title: 'Icons' } },
|
||||
{ path: '/maps', component: () => import('../views/MapsView.vue'), meta: { title: 'Maps' } },
|
||||
{ path: '/notifications',component: () => import('../views/NotificationsView.vue'), meta: { title: 'Notifications' } },
|
||||
{ path: '/profile', component: () => import('../views/ProfileView.vue'), meta: { title: 'Profile' } },
|
||||
],
|
||||
})
|
||||
|
||||
@@ -0,0 +1,240 @@
|
||||
<script setup>
|
||||
import DashboardLayout from '../layouts/DashboardLayout.vue'
|
||||
|
||||
const stats = [
|
||||
{ label: 'Followers', value: '4,812' },
|
||||
{ label: 'Following', value: '294' },
|
||||
{ label: 'Projects', value: '32' },
|
||||
]
|
||||
|
||||
const socials = [
|
||||
{ icon: 'facebook', color: 'text-blue-600', label: 'Facebook' },
|
||||
{ icon: 'twitter', color: 'text-sky-500', label: 'Twitter' },
|
||||
{ icon: 'instagram', color: 'text-pink-500', label: 'Instagram' },
|
||||
]
|
||||
|
||||
const conversations = [
|
||||
{ initials: 'OP', color: 'primary', name: 'Olivia Park', preview: 'Hey, I loved the new component library!', time: '5m' },
|
||||
{ initials: 'JD', color: 'info', name: 'James Donovan', preview: 'Can you review my PR when you get a chance?', time: '22m' },
|
||||
{ initials: 'SR', color: 'success', name: 'Sofia Reyes', preview: 'The design tokens look great in production.', time: '1h' },
|
||||
{ initials: 'ML', color: 'warning', name: 'Marco Lin', preview: 'Pushed the icon fix — all shadows resolved.', time: '3h' },
|
||||
{ initials: 'AM', color: 'secondary', name: 'Ally Maria', preview: 'Updated the font preload entries in index.html.', time: '1d' },
|
||||
]
|
||||
|
||||
const projects = [
|
||||
{ name: 'MK Design System', role: 'Lead', gradient: 'primary', members: ['PC', 'JD', 'SR'] },
|
||||
{ name: 'Dashboard Rework', role: 'Contributor', gradient: 'info', members: ['ML', 'AM'] },
|
||||
{ name: 'Icon Library', role: 'Owner', gradient: 'success', members: ['OP', 'JD'] },
|
||||
{ name: 'Typography Scale', role: 'Reviewer', gradient: 'warning', members: ['SR', 'ML', 'PC'] },
|
||||
]
|
||||
|
||||
const memberColor = { PC: 'primary', JD: 'info', SR: 'success', ML: 'warning', AM: 'secondary', OP: 'danger' }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardLayout>
|
||||
|
||||
<!-- Cover + avatar -->
|
||||
<div class="relative mb-20">
|
||||
<div class="h-48 overflow-hidden rounded-2xl bg-gradient-dark shadow-dark">
|
||||
<!-- Decorative grid -->
|
||||
<svg class="h-full w-full opacity-10" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="pgrid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" stroke-width="0.5"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#pgrid)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Avatar -->
|
||||
<div class="absolute -bottom-14 left-8 flex h-28 w-28 items-center justify-center rounded-2xl bg-gradient-primary text-4xl font-bold text-white shadow-primary ring-4 ring-white">
|
||||
EC
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 lg:grid-cols-3">
|
||||
|
||||
<!-- Left column -->
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- Identity card -->
|
||||
<div class="rounded-2xl bg-white p-6 shadow-soft-md">
|
||||
<h4 class="text-xl font-bold text-dark">Esthera Carter</h4>
|
||||
<p class="mt-0.5 text-sm text-secondary">Lead Designer · San Francisco, CA</p>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="mt-5 grid grid-cols-3 divide-x divide-gray-100 rounded-xl border border-gray-100">
|
||||
<div v-for="s in stats" :key="s.label" class="flex flex-col items-center py-3">
|
||||
<span class="text-lg font-bold text-dark">{{ s.value }}</span>
|
||||
<span class="text-xs text-secondary">{{ s.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bio -->
|
||||
<p class="mt-5 text-sm leading-relaxed text-secondary">
|
||||
Building design systems and component libraries. Obsessed with typography,
|
||||
spacing, and making sure every pixel is intentional.
|
||||
</p>
|
||||
|
||||
<!-- Socials -->
|
||||
<div class="mt-5 flex items-center gap-3">
|
||||
<a
|
||||
v-for="s in socials"
|
||||
:key="s.icon"
|
||||
href="#"
|
||||
class="flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100 transition-colors hover:bg-gray-200"
|
||||
:title="s.label"
|
||||
>
|
||||
<span class="material-icons text-base" :class="s.color">tag</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversations -->
|
||||
<div class="rounded-2xl bg-white p-6 shadow-soft-md">
|
||||
<h6 class="mb-4 text-sm font-bold text-dark">Conversations</h6>
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-for="c in conversations"
|
||||
:key="c.name"
|
||||
class="flex items-start gap-3 cursor-pointer group"
|
||||
>
|
||||
<div
|
||||
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-xs font-bold text-white"
|
||||
:class="`bg-gradient-${c.color} shadow-${c.color}`"
|
||||
>
|
||||
{{ c.initials }}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-dark group-hover:text-primary transition-colors">{{ c.name }}</p>
|
||||
<p class="text-xs text-secondary truncate">{{ c.preview }}</p>
|
||||
</div>
|
||||
<span class="shrink-0 text-xs text-secondary">{{ c.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Right column -->
|
||||
<div class="space-y-6 lg:col-span-2">
|
||||
|
||||
<!-- Projects -->
|
||||
<div class="rounded-2xl bg-white p-6 shadow-soft-md">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h6 class="text-sm font-bold text-dark">Projects</h6>
|
||||
<button class="rounded-lg bg-gradient-primary px-4 py-2 text-xs font-medium text-white shadow-primary">
|
||||
+ New
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div
|
||||
v-for="p in projects"
|
||||
:key="p.name"
|
||||
class="group relative overflow-hidden rounded-xl border border-gray-100 p-4 transition-shadow hover:shadow-soft-md"
|
||||
>
|
||||
<!-- Gradient accent bar -->
|
||||
<div class="absolute left-0 top-0 h-full w-1 rounded-l-xl" :class="`bg-gradient-${p.gradient}`" />
|
||||
|
||||
<div class="pl-3">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-dark">{{ p.name }}</p>
|
||||
<span
|
||||
class="mt-1 inline-block rounded-full px-2 py-0.5 text-xs font-medium"
|
||||
:class="`bg-${p.gradient}/10 text-${p.gradient}`"
|
||||
>
|
||||
{{ p.role }}
|
||||
</span>
|
||||
</div>
|
||||
<button class="text-secondary hover:text-dark">
|
||||
<span class="material-icons text-base leading-none">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Member avatars -->
|
||||
<div class="mt-3 flex items-center">
|
||||
<div class="flex -space-x-2">
|
||||
<div
|
||||
v-for="m in p.members"
|
||||
:key="m"
|
||||
class="flex h-7 w-7 items-center justify-center rounded-lg text-xs font-bold text-white ring-2 ring-white"
|
||||
:class="`bg-gradient-${memberColor[m]} shadow-${memberColor[m]}`"
|
||||
:title="m"
|
||||
>
|
||||
{{ m }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings -->
|
||||
<div class="rounded-2xl bg-white p-6 shadow-soft-md">
|
||||
<h6 class="mb-5 text-sm font-bold text-dark">Profile Settings</h6>
|
||||
<div class="space-y-4">
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-secondary">First Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value="Esthera"
|
||||
class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm text-dark outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-secondary">Last Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value="Carter"
|
||||
class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm text-dark outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-secondary">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
value="esthera@mkdesign.dev"
|
||||
class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm text-dark outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-secondary">Location</label>
|
||||
<input
|
||||
type="text"
|
||||
value="San Francisco, CA"
|
||||
class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm text-dark outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-secondary">Bio</label>
|
||||
<textarea
|
||||
rows="3"
|
||||
class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm text-dark outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors resize-none"
|
||||
>Building design systems and component libraries. Obsessed with typography, spacing, and making sure every pixel is intentional.</textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button class="rounded-lg bg-gradient-primary px-6 py-2.5 text-sm font-medium text-white shadow-primary hover:shadow-soft-md transition-shadow">
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</DashboardLayout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user