65 lines
2.1 KiB
JavaScript
65 lines
2.1 KiB
JavaScript
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'
|
|
|
|
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 }) {
|
|
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'}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
|
|
{actions.map((action) => (
|
|
<a key={action.key} href={action.href} 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">
|
|
<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>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|