update
This commit is contained in:
@@ -1,59 +1,124 @@
|
||||
import React from 'react'
|
||||
|
||||
const baseCard =
|
||||
'group rounded-xl border border-gray-700 bg-gray-800 p-4 shadow-lg transition hover:scale-[1.02] hover:border-cyan-500/40'
|
||||
'group rounded-2xl border border-white/10 bg-[#0b1826]/85 p-4 shadow-lg shadow-black/20 transition hover:-translate-y-0.5 hover:border-sky-300/35 hover:bg-[#102033]'
|
||||
|
||||
const actions = [
|
||||
{
|
||||
key: 'upload-artwork',
|
||||
label: 'Upload Artwork',
|
||||
href: '/upload',
|
||||
icon: 'fa-solid fa-cloud-arrow-up',
|
||||
description: 'Publish a new piece to your portfolio.',
|
||||
},
|
||||
{
|
||||
key: 'write-story',
|
||||
label: 'Write Story',
|
||||
href: '/creator/stories/create',
|
||||
icon: 'fa-solid fa-pen-nib',
|
||||
description: 'Create a story, tutorial, or showcase.',
|
||||
},
|
||||
{
|
||||
key: 'edit-profile',
|
||||
label: 'Edit Profile',
|
||||
href: '/settings/profile',
|
||||
icon: 'fa-solid fa-user-gear',
|
||||
description: 'Update your profile details and links.',
|
||||
},
|
||||
{
|
||||
key: 'notifications',
|
||||
label: 'View Notifications',
|
||||
href: '/messages',
|
||||
icon: 'fa-solid fa-bell',
|
||||
description: 'Catch up with mentions and updates.',
|
||||
},
|
||||
]
|
||||
export default function QuickActions({ isCreator, receivedCommentsCount = 0, onNavigate }) {
|
||||
const actions = [
|
||||
{
|
||||
key: 'edit-profile',
|
||||
label: 'Edit Profile',
|
||||
href: '/dashboard/profile',
|
||||
icon: 'fa-solid fa-user-gear',
|
||||
description: 'Refresh your bio, socials, avatar, and country details.',
|
||||
},
|
||||
{
|
||||
key: 'received-comments',
|
||||
label: 'Review Feedback',
|
||||
href: '/dashboard/comments/received',
|
||||
icon: 'fa-solid fa-inbox',
|
||||
description: 'Read the latest comments left on your work.',
|
||||
badge: receivedCommentsCount > 0 ? `${receivedCommentsCount} new` : null,
|
||||
},
|
||||
{
|
||||
key: 'notifications',
|
||||
label: 'Open Notifications',
|
||||
href: '/dashboard/notifications',
|
||||
icon: 'fa-solid fa-bell',
|
||||
description: 'Catch up on mentions, replies, and updates.',
|
||||
},
|
||||
...(isCreator
|
||||
? [
|
||||
{
|
||||
key: 'manage-artworks',
|
||||
label: 'Manage Artworks',
|
||||
href: '/dashboard/artworks',
|
||||
icon: 'fa-solid fa-layer-group',
|
||||
description: 'Edit titles, details, and the presentation of your portfolio.',
|
||||
},
|
||||
{
|
||||
key: 'write-story',
|
||||
label: 'Write Story',
|
||||
href: '/creator/stories/create',
|
||||
icon: 'fa-solid fa-pen-nib',
|
||||
description: 'Publish a tutorial, devlog, showcase, or announcement.',
|
||||
},
|
||||
{
|
||||
key: 'open-studio',
|
||||
label: 'Open Studio',
|
||||
href: '/studio',
|
||||
icon: 'fa-solid fa-compass-drafting',
|
||||
description: 'Jump into the wider creator workspace and analytics tools.',
|
||||
},
|
||||
{
|
||||
key: 'creator-stories',
|
||||
label: 'Story Dashboard',
|
||||
href: '/creator/stories',
|
||||
icon: 'fa-solid fa-newspaper',
|
||||
description: 'Review creator stories, drafts, and publishing flow in one place.',
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
key: 'upload-artwork',
|
||||
label: 'Upload Artwork',
|
||||
href: '/upload',
|
||||
icon: 'fa-solid fa-cloud-arrow-up',
|
||||
description: 'Start publishing and unlock more creator-focused dashboard tools.',
|
||||
},
|
||||
{
|
||||
key: 'explore-trending',
|
||||
label: 'Explore Trending',
|
||||
href: '/discover/trending',
|
||||
icon: 'fa-solid fa-fire-flame-curved',
|
||||
description: 'Browse what is hot right now to spot styles and creators worth following.',
|
||||
},
|
||||
{
|
||||
key: 'find-creators',
|
||||
label: 'Find Creators',
|
||||
href: '/creators/top',
|
||||
icon: 'fa-solid fa-user-group',
|
||||
description: 'Discover artists to follow and build a stronger feed around your taste.',
|
||||
},
|
||||
{
|
||||
key: 'saved-favorites',
|
||||
label: 'Open Favorites',
|
||||
href: '/dashboard/favorites',
|
||||
icon: 'fa-solid fa-bookmark',
|
||||
description: 'Revisit saved work and start shaping your own inspiration library.',
|
||||
},
|
||||
]),
|
||||
]
|
||||
|
||||
export default function QuickActions({ isCreator }) {
|
||||
return (
|
||||
<section className="rounded-xl border border-gray-700 bg-gray-800 p-5 shadow-lg">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold">Quick Actions</h2>
|
||||
<span className="rounded-full border border-gray-600 px-2 py-1 text-xs text-gray-300">
|
||||
{isCreator ? 'Creator mode' : 'User mode'}
|
||||
<section className="rounded-[28px] border border-white/10 bg-[#08111c]/90 p-5 shadow-2xl shadow-black/20 sm:p-6">
|
||||
<div className="mb-5 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/80">Quick Actions</p>
|
||||
<h2 className="mt-2 text-xl font-semibold text-white">Start something useful right now</h2>
|
||||
</div>
|
||||
<span className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs uppercase tracking-[0.16em] text-slate-300">
|
||||
{isCreator ? 'Creator Mode' : 'Member Mode'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{actions.map((action) => (
|
||||
<a key={action.key} href={action.href} className={baseCard}>
|
||||
<a key={action.key} href={action.href} onClick={() => onNavigate?.(action.href, action.label)} className={baseCard}>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 text-cyan-300">
|
||||
<span className="inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-sky-200">
|
||||
<i className={action.icon} aria-hidden="true" />
|
||||
</span>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-white">{action.label}</p>
|
||||
<p className="mt-1 text-xs text-gray-300">{action.description}</p>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="text-sm font-semibold text-white">{action.label}</p>
|
||||
{action.badge ? (
|
||||
<span className="rounded-full border border-sky-300/20 bg-sky-400/10 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.12em] text-sky-100">
|
||||
{action.badge}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<p className="mt-2 text-sm leading-6 text-slate-300">{action.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user