style: update browse page style

src/pages/Browse/Browse.tsx

@@ -5,42 +5,65 @@ import { useExtensions } from "../../context/extensions.ts";
 export default function Browse() {
   const { extensions } = useExtensions();
 
+  const Icon = ({ src, alt }: { src: string; alt: string }) => (
+    <figure className="w-12 h-12">
+      <img src={src} alt={alt} className="rounded-md" />
+    </figure>
+  );
+
+  const Detail = ({ children }: { children: React.ReactNode }) => (
+    <div className="flex flex-col">{children}</div>
+  );
+
+  const Title = ({ title }: { title: string }) => (
+    <h2 className="text-lg font-semibold">{title}</h2>
+  );
+
+  const Description = ({ language }: { language: string }) => (
+    <p className="text-neutral text-sm">
+      {language}
+    </p>
+  );
+
+  const Item = (
+    { key, children }: {
+      key: string;
+      children: React.ReactNode;
+    },
+  ) => (
+    <li key={key} className="flex items-center gap-4 p-3 rounded-lg shadow-md">
+      {children}
+    </li>
+  );
+
+  const Group = ({ children }: { children: React.ReactNode }) => (
+    <div className="space-y-4 mb-8">{children}</div>
+  );
+
   return (
-    <div>
-      <div>
-        <h1>
-          Explore
-        </h1>
-      </div>
-
-      <ul className="flex flex-col gap-2 px-8">
+    <div className="max-w-xl mx-auto p-3">
+      <h1 className="text-2xl font-bold mb-4">Explore</h1>
+
+      <Group>
         {extensions.map((extension) => (
-          <li
-            key={extension.id}
-            className="flex items-center gap-3"
-          >
-            <img
+          <Item key={extension.id}>
+            <Icon
               src={extension.iconUrl}
-              className="w-12 h-12"
-              alt={`${extension.source.name} icon`}
+              alt={extension.source.name}
             />
-            <div>
-              <span className="block text-lg">
-                {extension.source.name}
-              </span>
-              <div className="text-sm opacity-70">
-                {extension.source.language}
-              </div>
-            </div>
+            <Detail>
+              <Title title={extension.source.name} />
+              <Description language={extension.source.language} />
+            </Detail>
             <Link
               to={`/browse/${extension.id}`}
-              className="ml-auto text-blue-600 hover:underline"
+              className="ml-auto btn hover:btn-primary"
             >
               Browse
             </Link>
-          </li>
+          </Item>
         ))}
-      </ul>
+      </Group>
     </div>
   );
 }