more fixes

resources/js/components/profile/tabs/TabStories.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+export default function TabStories({ stories, username }) {
+  const list = Array.isArray(stories) ? stories : []
+
+  if (!list.length) {
+    return (
+      <div className="rounded-xl border border-white/10 bg-white/[0.02] px-6 py-12 text-center text-slate-300">
+        No stories published yet.
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {list.map((story) => (
+          <a
+            key={story.id}
+            href={`/stories/${story.slug}`}
+            className="group overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70 shadow-lg transition duration-200 hover:scale-[1.01] hover:border-sky-500/40"
+          >
+            {story.cover_url ? (
+              <img src={story.cover_url} alt={story.title} className="h-44 w-full object-cover transition-transform duration-300 group-hover:scale-105" />
+            ) : (
+              <div className="h-44 w-full bg-gradient-to-br from-gray-900 via-slate-900 to-sky-950" />
+            )}
+            <div className="space-y-2 p-4">
+              <h3 className="line-clamp-2 text-base font-semibold text-white">{story.title}</h3>
+              <p className="line-clamp-2 text-xs text-gray-300">{story.excerpt || ''}</p>
+              <div className="flex items-center gap-3 text-xs text-gray-400">
+                <span>{story.reading_time || 1} min read</span>
+                <span>{story.views || 0} views</span>
+                <span>{story.likes_count || 0} likes</span>
+              </div>
+            </div>
+          </a>
+        ))}
+      </div>
+
+      <a
+        href={`/stories/creator/${username}`}
+        className="inline-flex rounded-lg border border-sky-400/30 bg-sky-500/10 px-3 py-2 text-sm text-sky-300 transition hover:scale-[1.01] hover:text-sky-200"
+      >
+        View all stories
+      </a>
+    </div>
+  )
+}