refactor: wip

src/app/backlog/page.tsx

@@ -1,4 +1,4 @@
-import { BacklogPage } from "~/components/layouts";
+import { BacklogPage } from "~/components/pages/BacklogPage";
 
 export default async function Backlog() {
   return <BacklogPage />;

src/app/loading.tsx

@@ -1,4 +1,4 @@
-import { Loader } from "~/components/shared";
+import { Loader } from "~/components/Loader";
 
 export default function Loading() {
   return <Loader />;

src/app/not-found.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-import { PageContainer } from "~/components/shared";
+import { PageContainer } from "~/components/PageContainer";
 import { PAGE } from "~/utils/constants";
 
 export default function NotFound() {

src/app/page.tsx

@@ -1,4 +1,4 @@
-import { HomePage } from "~/components/layouts";
+import { HomePage } from "~/components/pages/HomePage";
 
 export default async function Home() {
   return <HomePage />;

src/app/people/[slug]/loading.tsx

@@ -1,4 +1,4 @@
-import { Loader } from "~/components/shared";
+import { Loader } from "~/components/Loader";
 
 export default function Loading() {
   return <Loader />;

src/app/people/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { PersonQAPage } from "~/components/layouts";
+import { PersonQAPage } from "~/components/pages/PersonQAPage";
 
 import { connectDB } from "~/app/lib/connectDB";
 import { Person, IPerson } from "~/models/Person";

src/app/questions/[slug]/loading.tsx

@@ -1,4 +1,4 @@
-import { Loader } from "~/components/shared";
+import { Loader } from "~/components/Loader";
 
 export default function Loading() {
   return <Loader />;

src/app/questions/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { QuestionPage } from "~/components/layouts";
+import { QuestionPage } from "~/components/pages/QuestionPage";
 
 import { getQuestions } from "~/api-client/questions";
 

src/app/questions/page.tsx

@@ -1,4 +1,4 @@
-import { QuestionsPage } from "~/components/layouts";
+import { QuestionsPage } from "~/components/pages/QuestionsPage";
 
 export default function Questions() {
   return <QuestionsPage />;

src/components/layouts/Header.tsx → src/components/Header.tsx

@@ -1,8 +1,8 @@
 import Link from "next/link";
 
-import { Logo } from "~/components/shared";
-import { ButtonLink } from "~/components/ui";
 import { ArrowTopRightSquare } from "~/components/icons";
+import { Logo } from "./Logo";
+import { ButtonLink } from "./ButtonLink";
 
 import { LINKEDIN, PAGE } from "~/utils/constants";
 

src/components/shared/Logo.tsx → src/components/Logo.tsx

@@ -1,4 +1,4 @@
-import { LogoIcon } from "~/components/icons";
+import { LogoIcon } from "~/components/icons/LogoIcon";
 
 export function Logo() {
   return (

src/components/shared/PersonCard.tsx → src/components/PersonCard.tsx

@@ -1,7 +1,8 @@
 import Link from "next/link";
 
-import { Card, PersonImage } from "~/components/shared";
 import { ArrowRightFull } from "~/components/icons";
+import { Card } from "~/components/Card";
+import { PersonImage } from "~/components/PersonImage";
 
 import { IPerson, ICompany } from "~/models/Person";
 import { cn } from "~/utils/handlers";

src/components/shared/ShareForm.tsx → src/components/ShareForm.tsx

@@ -3,9 +3,10 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { Card } from "~/components/shared";
-import { Button, Input } from "~/components/ui";
 import { ArrowRightFull } from "~/components/icons";
+import { Card } from "~/components/Card";
+import { Button } from "~/components/Button";
+import { Input } from "~/components/Input";
 
 import { submitName } from "~/api-client/names";
 import { cn } from "~/utils/handlers";

src/components/shared/SubscribeForm.tsx → src/components/SubscribeForm.tsx

@@ -3,8 +3,9 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { Card } from "~/components/shared";
-import { Button, Input } from "~/components/ui";
+import { Card } from "~/components/Card";
+import { Button } from "~/components/Button";
+import { Input } from "~/components/Input";
 
 import { submitSubscription } from "~/api-client/subscriptions";
 

src/components/layouts/BacklogPage.tsx → src/components/pages/BacklogPage.tsx

@@ -1,12 +1,10 @@
 import Link from "next/link";
-import { CheckIcon } from "@heroicons/react/16/solid";
 
-import { PageContainer } from "~/components/shared";
-import { BacklogCountLabel } from "~/components/pages/home";
+import { PageContainer } from "~/components/PageContainer";
+import { BacklogListItem, BacklogCountLabel } from "./backlog";
 
 import { EMAIL } from "~/utils/constants";
-import { BACKLOG, BacklogItem } from "~/utils/data";
-import { cn } from "~/utils/handlers";
+import { BACKLOG } from "~/utils/data";
 
 export function BacklogPage() {
   const todoList = BACKLOG.items.filter((item) => !item.done);
@@ -30,13 +28,13 @@ export function BacklogPage() {
         <div className="mb-16 space-y-6 sm:mb-10">
           <ul className="space-y-2">
             {todoList.map((item, index) => (
-              <ListItem item={item} key={index} />
+              <BacklogListItem item={item} key={index} />
             ))}
           </ul>
 
           <ul className="space-y-2">
             {doneList.map((item, index) => (
-              <ListItem item={item} key={index} />
+              <BacklogListItem item={item} key={index} />
             ))}
           </ul>
         </div>
@@ -60,32 +58,3 @@ export function BacklogPage() {
     </PageContainer>
   );
 }
-
-// List Item
-interface ListItemProps {
-  item: BacklogItem;
-}
-function ListItem({ item }: ListItemProps) {
-  return (
-    <li className="flex cursor-default items-start gap-3">
-      <span
-        className={cn(
-          "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full",
-          item.done
-            ? "bg-green-600/90"
-            : "border border-stone-400/50 bg-stone-50",
-        )}
-      >
-        {item.done ? <CheckIcon className="size-4 text-stone-50" /> : null}
-      </span>
-      <span
-        className={cn(
-          "text-base leading-snug",
-          item.done && "text-stone-400/90 line-through",
-        )}
-      >
-        {item.title}
-      </span>
-    </li>
-  );
-}

src/components/layouts/HomePage.tsx → src/components/pages/HomePage.tsx

@@ -1,5 +1,7 @@
-import { ShareForm, SubscribeForm, PageContainer } from "~/components/shared";
-import { About, MainCards, BacklogPreview } from "~/components/pages/home";
+import { MainCards, About, BacklogPreview } from "./home";
+import { PageContainer } from "~/components/PageContainer";
+import { ShareForm } from "~/components/ShareForm";
+import { SubscribeForm } from "~/components/SubscribeForm";
 
 import { getPeople } from "~/api-client/people";
 

src/components/layouts/PersonQAPage.tsx → src/components/pages/PersonQAPage.tsx

@@ -1,11 +1,8 @@
 import { notFound } from "next/navigation";
 
-import { ShareForm, PageContainer } from "~/components/shared";
-import {
-  PersonPreview,
-  Content,
-  SidePeoplePanel,
-} from "~/components/pages/person";
+import { PersonPreview, Content, SidePeoplePanel } from "./person";
+import { PageContainer } from "~/components/PageContainer";
+import { ShareForm } from "~/components/ShareForm";
 
 import { getPerson } from "~/api-client/people";
 import { getAnswersByPersonSlug } from "~/api-client/answers";

src/components/layouts/QuestionPage.tsx → src/components/pages/QuestionPage.tsx

@@ -1,15 +1,15 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
 
-import { PersonImage, PageContainer } from "~/components/shared";
+import { PageContainer } from "~/components/PageContainer";
 import { Answer } from "~/components/pages/person";
-import { QuestionsNavigation } from "~/components/pages/question";
+import { PersonDetails, QuestionsNavigation } from "./question";
 
 import { getAnswersByQuestionSlug } from "~/api-client/answers";
+import { getQuestions } from "~/api-client/questions";
 import { IPerson } from "~/models/Person";
 
 import { BASE_URL } from "~/utils/constants";
-import { getQuestions } from "~/api-client/questions";
 
 interface QuestionPageProps {
   slug: string;
@@ -23,8 +23,6 @@ export async function QuestionPage({ slug }: QuestionPageProps) {
     notFound();
   }
 
-  // console.log(answers);
-
   const currentIndex = questions?.findIndex((item) => item.slug === slug);
 
   const question = questions?.[currentIndex];
@@ -76,27 +74,3 @@ export async function QuestionPage({ slug }: QuestionPageProps) {
     </PageContainer>
   );
 }
-
-// Person details
-interface PersonDetailsProps {
-  person: IPerson;
-}
-
-function PersonDetails({ person }: PersonDetailsProps) {
-  return (
-    <div className="flex items-start gap-3 text-base leading-none">
-      <div className="size-10 shrink-0 overflow-hidden rounded-full">
-        <PersonImage person={person} />
-      </div>
-      <div className="flex flex-col gap-1.5">
-        <Link
-          href={`${BASE_URL}/people/${person.slug}`}
-          className="w-fit font-semibold tracking-header underline underline-offset-1 hover:no-underline hover:opacity-50"
-        >
-          {person.name}
-        </Link>
-        <span>{`${person.jobTitle} @ ${person.company.name}`}</span>
-      </div>
-    </div>
-  );
-}

src/components/pages/QuestionsPage.tsx

@@ -0,0 +1,28 @@
+import { notFound } from "next/navigation";
+
+import { QuestionItem } from "./questions";
+import { PageContainer } from "~/components/PageContainer";
+
+import { getQuestions } from "~/api-client/questions";
+
+export async function QuestionsPage() {
+  const questions = await getQuestions();
+
+  if (!questions) {
+    notFound();
+  }
+
+  return (
+    <PageContainer className="max-w-4xl">
+      {questions && (
+        <ul className="space-y-1">
+          {questions.map((item, index) => (
+            <li key={index}>
+              <QuestionItem question={item} />
+            </li>
+          ))}
+        </ul>
+      )}
+    </PageContainer>
+  );
+}

src/components/pages/backlog/BacklogCountLabel.tsx

@@ -0,0 +1,15 @@
+import { BACKLOG } from "~/utils/data";
+
+export function BacklogCountLabel() {
+  const todoList = BACKLOG.items.filter((item) => !item.done);
+  const doneList = BACKLOG.items.filter((item) => item.done);
+
+  return (
+    <div className="flex h-6 items-center justify-center rounded-full bg-stone-950 px-2">
+      <span className="mr-1 text-sm text-stone-50">{todoList.length}</span>
+      <span className="text-sm text-stone-50 opacity-50">
+        {`/ ${doneList.length}`}
+      </span>
+    </div>
+  );
+}

src/components/pages/backlog/BacklogListItem.tsx

@@ -0,0 +1,33 @@
+import { CheckIcon } from "@heroicons/react/16/solid";
+
+import { BacklogItem } from "~/utils/data";
+import { cn } from "~/utils/handlers";
+
+interface ListItemProps {
+  item: BacklogItem;
+}
+
+export function BacklogListItem({ item }: ListItemProps) {
+  return (
+    <li className="flex cursor-default items-start gap-3">
+      <span
+        className={cn(
+          "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full",
+          item.done
+            ? "bg-green-600/90"
+            : "border border-stone-400/50 bg-stone-50",
+        )}
+      >
+        {item.done ? <CheckIcon className="size-4 text-stone-50" /> : null}
+      </span>
+      <span
+        className={cn(
+          "text-base leading-snug",
+          item.done && "text-stone-400/90 line-through",
+        )}
+      >
+        {item.title}
+      </span>
+    </li>
+  );
+}

src/components/pages/backlog/index.ts

@@ -0,0 +1,2 @@
+export * from "./BacklogCountLabel";
+export * from "./BacklogListItem";