more fixes

resources/js/dashboard/components/QuickActions.jsx

@@ -0,0 +1,64 @@
+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>
+  )
+}