fix: refactored config and links

EddieHubCommunity · Jun 16, 2024 · cf02dfb · cf02dfb
1 parent e78ee71
commit cf02dfb
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 40 deletions.
diff --git a/src/app/[username]/page.js b/src/app/[username]/page.js
@@ -2,7 +2,8 @@ import { redirect } from "next/navigation";
 
 import prisma from "@/models/db";
 import Items from "@/components/list/Items";
-import reach from "@/config/reach";
+import REACH from "@/config/reach";
+import PLATFORMS from "@/config/platforms";
 
 export default async function Page({ params }) {
   const user = await prisma.user.findUnique({
@@ -79,10 +80,12 @@ export default async function Page({ params }) {
                     id: platform.id,
                     icon: platform.name,
                     url: platform.url,
-                    urlText: platform.url,
-                    description: `${reach().data[platform.reach].name} ($${
+                    urlText: `${REACH().data[platform.reach].name} on ${
+                      PLATFORMS().data[platform.name].display
+                    } with ${REACH().data[platform.reach].group} (from $${
                       platform.price
                     })`,
+                    description: platform.description,
                   }))}
                 />
               </div>

diff --git a/src/app/account/links/form.js b/src/app/account/links/form.js
@@ -8,8 +8,8 @@ import { SubmitButton } from "@/components/forms/SubmitButton";
 import Input from "@/components/forms/Input";
 import Alert from "@/components/Alert";
 import Select from "@/components/forms/Select";
-import platforms from "@/config/platforms";
-import reach from "@/config/reach";
+import PLATFORMS from "@/config/platforms";
+import REACH from "@/config/reach";
 import Textarea from "@/components/forms/Textarea";
 
 const initialState = {
@@ -54,14 +54,14 @@ export default function Form({ data }) {
             <Select
               name="name"
               error={state?.errors?.name}
-              options={platforms().select}
+              options={PLATFORMS().select}
               value={edit.name}
             />
 
             <Select
               name="reach"
               error={state?.errors?.reach}
-              options={reach().select}
+              options={REACH().select}
               value={edit.reach}
             />
 

diff --git a/src/app/account/links/page.js b/src/app/account/links/page.js
@@ -5,7 +5,8 @@ import prisma from "@/models/db";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import Alert from "@/components/Alert";
 import Items from "@/components/list/Items";
-import reach from "@/config/reach";
+import REACH from "@/config/reach";
+import PLATFORMS from "@/config/platforms";
 import Form from "./form";
 
 export default async function Page() {
@@ -43,10 +44,12 @@ export default async function Page() {
                     id: platform.id,
                     icon: platform.name,
                     url: `?id=${platform.id}`,
-                    urlText: platform.url,
-                    description: `${reach().data[platform.reach].name} ($${
+                    urlText: `${REACH().data[platform.reach].name} on ${
+                      PLATFORMS().data[platform.name].display
+                    } with ${REACH().data[platform.reach].group} (from $${
                       platform.price
                     })`,
+                    description: platform.description,
                   }))}
                 />
               </div>

diff --git a/src/app/page.js b/src/app/page.js
@@ -33,7 +33,10 @@ export default async function Page() {
                     image: user.image,
                     url: `/${user.username}`,
                     urlText: user.name,
-                    description: user.email,
+                    description: user.bio,
+                    badges: user.platforms.map((platform) => ({
+                      icon: platform.name,
+                    })),
                   }))}
                 />
               </div>

diff --git a/src/components/list/Item.js b/src/components/list/Item.js
@@ -6,14 +6,14 @@ export default function Item({ data }) {
   return (
     <li
       key={data.id}
-      className="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-gray-50 sm:px-6 lg:px-8"
+      className="relative hover:bg-gray-50 flex flex-wrap items-center justify-between gap-x-6 gap-y-4 py-5 sm:flex-nowrap"
     >
       <div className="flex min-w-0 gap-x-4">
         {data.image && (
           <img
             className="h-12 w-12 flex-none rounded-full bg-gray-50"
             src={data.image}
-            alt=""
+            alt={data.description}
           />
         )}
         {data.icon && (
@@ -34,28 +34,24 @@ export default function Item({ data }) {
           </p>
         </div>
       </div>
-      <div className="flex shrink-0 items-center gap-x-4">
-        <div className="hidden sm:flex sm:flex-col sm:items-end">
-          <p className="text-sm leading-6 text-gray-900">{data.role}</p>
-          {data.lastSeen ? (
-            <p className="mt-1 text-xs leading-5 text-gray-500">
-              Last seen{" "}
-              <time dateTime={data.lastSeenDateTime}>{data.lastSeen}</time>
-            </p>
-          ) : (
-            <div className="mt-1 flex items-center gap-x-1.5">
-              <div className="flex-none rounded-full bg-emerald-500/20 p-1">
-                <div className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
-              </div>
-              <p className="text-xs leading-5 text-gray-500">Online</p>
-            </div>
-          )}
+      <dl className="flex w-full flex-none justify-between gap-x-8 sm:w-auto">
+        <div className="flex -space-x-0.5">
+          <dt className="sr-only">Commenters</dt>
+          {data.badges &&
+            data.badges.map((badge, key) => (
+              <dd key={key}>
+                <SocialIcon
+                  network={badge.icon}
+                  className="h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white"
+                />
+              </dd>
+            ))}
+          <ChevronRightIcon
+            className="h-5 w-5 flex-none text-gray-400"
+            aria-hidden="true"
+          />
         </div>
-        <ChevronRightIcon
-          className="h-5 w-5 flex-none text-gray-400"
-          aria-hidden="true"
-        />
-      </div>
+      </dl>
     </li>
   );
 }
diff --git a/src/config/platforms.js b/src/config/platforms.js
@@ -1,4 +1,4 @@
-export default function platforms() {
+export default function PLATFORMS() {
   const data = {
     twitter: {
       value: "twitter",

diff --git a/src/config/reach.js b/src/config/reach.js
@@ -1,4 +1,4 @@
-export default function reach() {
+export default function REACH() {
   const data = {
     nano: {
       value: "nano",

diff --git a/src/models/Platform.js b/src/models/Platform.js
@@ -1,12 +1,12 @@
 import { z } from "zod";
 
-import reach from "@/config/reach";
-import platforms from "@/config/platforms";
+import REACH from "@/config/reach";
+import PLATFORMS from "@/config/platforms";
 
 export default function Platform(platform) {
   const schema = z.object({
-    name: z.enum(platforms().enum),
-    reach: z.enum(reach().enum),
+    name: z.enum(PLATFORMS().enum),
+    reach: z.enum(REACH().enum),
     price: z.number().min(10),
     url: z.string().url(),
     example: z.string().url(),