pagers-org · limgyumin · Sep 11, 2023 · Sep 10, 2023 · Sep 10, 2023 · Sep 10, 2023
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,36 +1,28 @@
 import type { Metadata } from "next";
-import { Titillium_Web } from "next/font/google";
+import { Inter } from "next/font/google";
 
 import type { PropsWithChildren } from "react";
 
-import { Footer } from "components/shared/footer";
-import { Header } from "components/shared/header";
+import { CommonLayout } from "components/shared/common-layout";
 import { Providers } from "components/shared/providers";
 
-import "styles/main.css";
-import "styles/ionicons.min.css";
 import "styles/tailwind.css";
 
 export const metadata: Metadata = {
   title: "Real World",
   description: "real world project",
 };
 
-const titillium = Titillium_Web({
+const inter = Inter({
   subsets: ["latin"],
-  weight: "400",
-  variable: "--titillium-web-font",
+  variable: "--font-sans",
 });
 
 const RootLayout = ({ children }: PropsWithChildren) => {
   return (
-    <html lang="en" className={titillium.variable}>
+    <html lang="en" className={inter.variable}>
       <Providers>
-        <body>
-          <Header />
-          {children}
-          <Footer />
-        </body>
+        <CommonLayout>{children}</CommonLayout>
       </Providers>
     </html>
   );

diff --git a/components/(home)/article-list-item/article-list-item.tsx b/components/(home)/article-list-item/article-list-item.tsx
@@ -1,3 +1,7 @@
+import Link from "next/link";
+
+import { IoHeartOutline } from "react-icons/io5";
+
 import { Avatar } from "components/shared/ui/avatar";
 import { Button } from "components/shared/ui/button";
 import { ListItem } from "components/shared/ui/list-item";
@@ -6,38 +10,40 @@ import { Tags } from "components/shared/ui/tags";
 export const ArticleListItem = () => {
   return (
     <ListItem.Root>
-      <Avatar.Root>
-        <Avatar.Anchor href="/profile/eric-simons">
-          <Avatar.Image src="http://i.imgur.com/Qr71crq.jpg" alt="" />
-        </Avatar.Anchor>
-
-        <Avatar.Info>
-          <Avatar.Anchor href="/profile/eric-simons">
-            <Avatar.Name>Eric Simons</Avatar.Name>
-          </Avatar.Anchor>
-
-          <Avatar.Description>January 20th</Avatar.Description>
-        </Avatar.Info>
-
-        <div className="pull-xs-right">
-          <Button outline>
-            <i className="ion-heart" /> 29
-          </Button>
-        </div>
-      </Avatar.Root>
-
-      <ListItem.Content href="/article/how-to-build-webapps-that-scale">
-        <ListItem.Title>How to build webapps that scale</ListItem.Title>
-
-        <ListItem.Description>This is the description for the post.</ListItem.Description>
-
-        <span>Read more...</span>
-
-        <Tags.Root>
-          <Tags.Item outline>realworld</Tags.Item>
-          <Tags.Item outline>implementations</Tags.Item>
-        </Tags.Root>
-      </ListItem.Content>
+      <div className="mb-2 flex items-center justify-between">
+        <Link href="/profile/eric-simons">
+          <Avatar.Root>
+            <Avatar.Image src="http://i.imgur.com/Qr71crq.jpg" alt="" />
+
+            <Avatar.Info>
+              <Avatar.Name>Eric Simons</Avatar.Name>
+
+              <Avatar.Description>January 20th</Avatar.Description>
+            </Avatar.Info>
+          </Avatar.Root>
+        </Link>
+
+        <Button variant="secondary" icon={<IoHeartOutline />}>
+          29
+        </Button>
+      </div>
+
+      <Link href="/article/how-to-build-webapps-that-scale">
+        <ListItem.Content>
+          <ListItem.Title>How to build webapps that scale</ListItem.Title>
+
+          <ListItem.Description>This is the description for the post.</ListItem.Description>
+
+          <div className="mt-2 flex w-full items-center justify-between">
+            <span className="text-xs font-light text-zinc-600">Read more...</span>
+
+            <Tags.Root>
+              <Tags.Item variant="secondary">realworld</Tags.Item>
+              <Tags.Item variant="secondary">implementations</Tags.Item>
+            </Tags.Root>
+          </div>
+        </ListItem.Content>
+      </Link>
     </ListItem.Root>
   );
 };
diff --git a/components/(home)/banner/banner.tsx b/components/(home)/banner/banner.tsx
@@ -1,10 +1,8 @@
 export const Banner = () => {
   return (
-    <div className="banner">
-      <div className="container">
-        <h1 className="logo-font">conduit</h1>
-        <p>A place to share your knowledge.</p>
-      </div>
+    <div className="flex h-64 w-full flex-col items-center justify-center gap-2 bg-zinc-900">
+      <h1 className="text-6xl font-bold tracking-widest text-white">conduit</h1>
+      <p className="text-lg font-light tracking-wider text-white">A place to share your knowledge.</p>
     </div>
   );
 };
diff --git a/components/(home)/feed/feed.tsx b/components/(home)/feed/feed.tsx
@@ -5,7 +5,7 @@ import { ArticleListItem } from "../article-list-item";
 
 export const Feed = () => {
   return (
-    <div className="col-md-9">
+    <div className="pt-4">
       <Tabs.Root defaultValue="2">
         <Tabs.List>
           <Tabs.Trigger value="1">Your Feed</Tabs.Trigger>
@@ -25,7 +25,9 @@ export const Feed = () => {
         </Tabs.Content>
       </Tabs.Root>
 
-      <Pagination total={10} />
+      <div className="flex w-full justify-center py-10">
+        <Pagination total={10} currentPage={1} />
+      </div>
     </div>
   );
 };
diff --git a/components/(home)/feed/index.ts b/components/(home)/feed/index.ts
@@ -0,0 +1 @@
+export { Feed } from "./feed";
diff --git a/components/(home)/index.tsx b/components/(home)/index.tsx
@@ -1,18 +1,18 @@
 import { Banner } from "./banner";
-import { Feed } from "./feed/feed";
+import { Feed } from "./feed";
 import { SideBar } from "./side-bar";
 
 export const Home = () => {
   return (
-    <div className="home-page">
+    <>
       <Banner />
 
-      <div className="page container">
-        <div className="row">
+      <div className="flex justify-center">
+        <div className="page relative">
           <Feed />
           <SideBar />
         </div>
       </div>
-    </div>
+    </>
   );
 };
diff --git a/components/(home)/side-bar/side-bar.tsx b/components/(home)/side-bar/side-bar.tsx
@@ -2,9 +2,9 @@ import { Tags } from "components/shared/ui/tags";
 
 export const SideBar = () => {
   return (
-    <div className="col-md-3">
-      <div className="sidebar">
-        <p>Popular Tags</p>
+    <div className="absolute left-[100%] top-[52px] pl-10">
+      <div className="w-56 rounded-md bg-zinc-100 px-3 py-2">
+        <p className="mb-3 text-base font-medium text-zinc-800">Popular Tags</p>
 
         <Tags.Root as="div">
           <Tags.Item as="a">tag</Tags.Item>

diff --git a/components/shared/common-layout/common-layout.tsx b/components/shared/common-layout/common-layout.tsx
@@ -0,0 +1,16 @@
+import type { PropsWithChildren } from "react";
+
+import { Footer } from "../footer";
+import { Header } from "../header";
+
+export const CommonLayout = ({ children }: PropsWithChildren) => {
+  return (
+    <body>
+      <div className="relative min-h-[100vh]">
+        <Header />
+        <div className="pb-14 pt-10">{children}</div>
+        <Footer />
+      </div>
+    </body>
+  );
+};
diff --git a/components/shared/common-layout/index.ts b/components/shared/common-layout/index.ts
@@ -0,0 +1 @@
+export { CommonLayout } from "./common-layout";
diff --git a/components/shared/footer/footer.tsx b/components/shared/footer/footer.tsx
@@ -1,13 +1,17 @@
 export const Footer = () => {
   return (
-    <footer>
-      <div className="container">
-        <a href="/" className="logo-font">
+    <footer className="absolute bottom-0 left-0 right-0 flex h-14 w-full justify-center bg-zinc-100">
+      <div className="page flex items-center gap-4">
+        <a href="/" className="text-lg font-semibold text-zinc-800">
           conduit
         </a>
-        <span className="attribution">
-          An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code &amp; design licensed
-          under MIT.
+
+        <span className="text-sm font-normal text-zinc-500">
+          An interactive learning project from{" "}
+          <a className="italic underline" href="https://thinkster.io">
+            Thinkster
+          </a>
+          . Code &amp; design licensed under MIT.
         </span>
       </div>
     </footer>

diff --git a/components/shared/header/header.tsx b/components/shared/header/header.tsx
@@ -1,25 +1,24 @@
+import Link from "next/link";
+
 export const Header = () => {
   return (
-    <nav className="navbar navbar-light">
-      <div className="container">
-        <a className="navbar-brand" href="/">
+    <nav className="fixed left-0 right-0 top-0 z-50 flex h-10 w-full justify-center bg-white shadow-md">
+      <div className="page flex items-center justify-between">
+        <Link className="text-lg font-semibold text-zinc-800" href="/">
           conduit
-        </a>
-        <ul className="nav navbar-nav pull-xs-right">
-          <li className="nav-item">
-            <a className="nav-link active" href="/">
-              Home
-            </a>
+        </Link>
+
+        <ul className="flex items-center gap-4">
+          <li className="text-xs font-normal text-zinc-500 no-underline hover:text-zinc-700">
+            <Link href="/">Home</Link>
           </li>
-          <li className="nav-item">
-            <a className="nav-link" href="/login">
-              Sign in
-            </a>
+
+          <li className="text-xs font-normal text-zinc-500 no-underline hover:text-zinc-700">
+            <Link href="/login">Sign in</Link>
           </li>
-          <li className="nav-item">
-            <a className="nav-link" href="/register">
-              Sign up
-            </a>
+
+          <li className="text-xs font-normal text-zinc-500 no-underline hover:text-zinc-700">
+            <Link href="/register">Sign up</Link>
           </li>
         </ul>
       </div>

diff --git a/components/shared/ui/avatar/anchor.tsx b/components/shared/ui/avatar/anchor.tsx
diff --git a/components/shared/ui/avatar/description.tsx b/components/shared/ui/avatar/description.tsx
@@ -7,7 +7,7 @@ type Props = ComponentPropsWithoutRef<"span">;
 
 export const Description = forwardRef<HTMLSpanElement, Props>(({ children, className, ...rest }, ref) => {
   return (
-    <span ref={ref} {...rest} className={clsx("date", className)}>
+    <span ref={ref} {...rest} className={clsx("text-xs font-normal text-zinc-500", className)}>
       {children}
     </span>
   );

diff --git a/components/shared/ui/avatar/image.tsx b/components/shared/ui/avatar/image.tsx
@@ -3,10 +3,11 @@ import NextImage from "next/image";
 import type { ComponentProps, ComponentPropsWithoutRef } from "react";
 import { forwardRef } from "react";
 
+import { clsx } from "lib/clsx";
 import type { Override } from "types/utilities";
 
 type Props = Override<ComponentPropsWithoutRef<"img">, ComponentProps<typeof NextImage>>;
 
-export const Image = forwardRef<HTMLImageElement, Props>(({ ...rest }, ref) => {
-  return <NextImage ref={ref} {...rest} width={32} height={32} />;
+export const Image = forwardRef<HTMLImageElement, Props>(({ className, ...rest }, ref) => {
+  return <NextImage ref={ref} {...rest} className={clsx("rounded-full", className)} width={36} height={36} />;
 });
diff --git a/components/shared/ui/avatar/index.ts b/components/shared/ui/avatar/index.ts
@@ -1,4 +1,3 @@
-import { Anchor } from "./anchor";
 import { Description } from "./description";
 import { Image } from "./image";
 import { Info } from "./info";
@@ -7,7 +6,6 @@ import { Root } from "./root";
 
 export const Avatar = {
   Root,
-  Anchor,
   Image,
   Info,
   Name,

diff --git a/components/shared/ui/avatar/info.tsx b/components/shared/ui/avatar/info.tsx
@@ -7,7 +7,7 @@ type Props = ComponentPropsWithoutRef<"div">;
 
 export const Info = forwardRef<HTMLDivElement, Props>(({ children, className, ...rest }, ref) => {
   return (
-    <div ref={ref} {...rest} className={clsx("info", className)}>
+    <div ref={ref} {...rest} className={clsx("flex flex-col", className)}>
       {children}
     </div>
   );

diff --git a/components/shared/ui/avatar/name.tsx b/components/shared/ui/avatar/name.tsx
@@ -7,7 +7,7 @@ type Props = ComponentPropsWithoutRef<"span">;
 
 export const Name = forwardRef<HTMLSpanElement, Props>(({ children, className, ...rest }, ref) => {
   return (
-    <span ref={ref} {...rest} className={clsx("author", className)}>
+    <span ref={ref} {...rest} className={clsx("text-sm font-normal text-zinc-800", className)}>
       {children}
     </span>
   );

diff --git a/components/shared/ui/avatar/root.tsx b/components/shared/ui/avatar/root.tsx
@@ -7,7 +7,7 @@ type Props = ComponentPropsWithoutRef<"div">;
 
 export const Root = forwardRef<HTMLDivElement, Props>(({ children, className, ...rest }, ref) => {
   return (
-    <div ref={ref} {...rest} className={clsx("article-meta", className)}>
+    <div ref={ref} {...rest} className={clsx("flex items-center gap-2", className)}>
       {children}
     </div>
   );