pagers-org · limgyumin · Sep 9, 2023 · Sep 9, 2023 · Sep 9, 2023 · Sep 9, 2023
diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx
@@ -0,0 +1,7 @@
+import { Home } from "components/(home)";
+
+const HomePage = () => {
+  return <Home />;
+};
+
+export default HomePage;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,22 +1,36 @@
 import type { Metadata } from "next";
+import { Titillium_Web } from "next/font/google";
 
 import type { PropsWithChildren } from "react";
 
-import { Providers } from "lib/providers";
+import { Footer } from "components/shared/footer";
+import { Header } from "components/shared/header";
+import { Providers } from "components/shared/providers";
 
-import "styles/normalize.css";
+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({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--titillium-web-font",
+});
+
 const RootLayout = ({ children }: PropsWithChildren) => {
   return (
-    <html lang="en">
+    <html lang="en" className={titillium.variable}>
       <Providers>
-        <body>{children}</body>
+        <body>
+          <Header />
+          {children}
+          <Footer />
+        </body>
       </Providers>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
diff --git a/components/(home)/article-list-item/article-list-item.tsx b/components/(home)/article-list-item/article-list-item.tsx
@@ -0,0 +1,43 @@
+import { Avatar } from "components/shared/ui/avatar";
+import { Button } from "components/shared/ui/button";
+import { ListItem } from "components/shared/ui/list-item";
+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>
+    </ListItem.Root>
+  );
+};
diff --git a/components/(home)/article-list-item/index.ts b/components/(home)/article-list-item/index.ts
@@ -0,0 +1 @@
+export { ArticleListItem } from "./article-list-item";
diff --git a/components/(home)/banner/banner.tsx b/components/(home)/banner/banner.tsx
@@ -0,0 +1,10 @@
+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>
+  );
+};
diff --git a/components/(home)/banner/index.ts b/components/(home)/banner/index.ts
@@ -0,0 +1 @@
+export { Banner } from "./banner";
diff --git a/components/(home)/feed/feed.tsx b/components/(home)/feed/feed.tsx
@@ -0,0 +1,31 @@
+import { Pagination } from "components/shared/ui/pagination";
+import { Tabs } from "components/shared/ui/tabs";
+
+import { ArticleListItem } from "../article-list-item";
+
+export const Feed = () => {
+  return (
+    <div className="col-md-9">
+      <Tabs.Root defaultValue="2">
+        <Tabs.List>
+          <Tabs.Trigger value="1">Your Feed</Tabs.Trigger>
+          <Tabs.Trigger value="2">Global Feed</Tabs.Trigger>
+        </Tabs.List>
+
+        <Tabs.Content value="1">
+          <ArticleListItem />
+        </Tabs.Content>
+
+        <Tabs.Content value="2">
+          <ArticleListItem />
+          <ArticleListItem />
+          <ArticleListItem />
+          <ArticleListItem />
+          <ArticleListItem />
+        </Tabs.Content>
+      </Tabs.Root>
+
+      <Pagination total={10} />
+    </div>
+  );
+};
diff --git a/components/(home)/index.tsx b/components/(home)/index.tsx
@@ -0,0 +1,18 @@
+import { Banner } from "./banner";
+import { Feed } from "./feed/feed";
+import { SideBar } from "./side-bar";
+
+export const Home = () => {
+  return (
+    <div className="home-page">
+      <Banner />
+
+      <div className="page container">
+        <div className="row">
+          <Feed />
+          <SideBar />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/components/(home)/side-bar/index.ts b/components/(home)/side-bar/index.ts
@@ -0,0 +1 @@
+export { SideBar } from "./side-bar";
diff --git a/components/(home)/side-bar/side-bar.tsx b/components/(home)/side-bar/side-bar.tsx
@@ -0,0 +1,15 @@
+import { Tags } from "components/shared/ui/tags";
+
+export const SideBar = () => {
+  return (
+    <div className="col-md-3">
+      <div className="sidebar">
+        <p>Popular Tags</p>
+
+        <Tags.Root as="div">
+          <Tags.Item as="a">tag</Tags.Item>
+        </Tags.Root>
+      </div>
+    </div>
+  );
+};
diff --git a/components/shared/footer/footer.tsx b/components/shared/footer/footer.tsx
@@ -0,0 +1,15 @@
+export const Footer = () => {
+  return (
+    <footer>
+      <div className="container">
+        <a href="/" className="logo-font">
+          conduit
+        </a>
+        <span className="attribution">
+          An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code &amp; design licensed
+          under MIT.
+        </span>
+      </div>
+    </footer>
+  );
+};
diff --git a/components/shared/footer/index.ts b/components/shared/footer/index.ts
@@ -0,0 +1 @@
+export { Footer } from "./footer";
diff --git a/components/shared/header/header.tsx b/components/shared/header/header.tsx
@@ -0,0 +1,28 @@
+export const Header = () => {
+  return (
+    <nav className="navbar navbar-light">
+      <div className="container">
+        <a className="navbar-brand" href="/">
+          conduit
+        </a>
+        <ul className="nav navbar-nav pull-xs-right">
+          <li className="nav-item">
+            <a className="nav-link active" href="/">
+              Home
+            </a>
+          </li>
+          <li className="nav-item">
+            <a className="nav-link" href="/login">
+              Sign in
+            </a>
+          </li>
+          <li className="nav-item">
+            <a className="nav-link" href="/register">
+              Sign up
+            </a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  );
+};
diff --git a/components/shared/header/index.ts b/components/shared/header/index.ts
@@ -0,0 +1 @@
+export { Header } from "./header";
diff --git a/lib/providers/index.tsx → components/shared/providers/index.tsx b/lib/providers/index.tsx → components/shared/providers/index.tsx
diff --git a/lib/providers/swr-provider.tsx → components/shared/providers/swr-provider.tsx b/lib/providers/swr-provider.tsx → components/shared/providers/swr-provider.tsx
diff --git a/components/shared/ui/avatar/anchor.tsx b/components/shared/ui/avatar/anchor.tsx
@@ -0,0 +1,16 @@
+import Link from "next/link";
+
+import { forwardRef } from "react";
+import type { ComponentProps, ComponentPropsWithoutRef } from "react";
+
+import type { Override } from "types/utilities";
+
+type Props = Override<ComponentPropsWithoutRef<"a">, ComponentProps<typeof Link>>;
+
+export const Anchor = forwardRef<HTMLAnchorElement, Props>(({ children, ...rest }, ref) => {
+  return (
+    <Link ref={ref} {...rest}>
+      {children}
+    </Link>
+  );
+});
diff --git a/components/shared/ui/avatar/description.tsx b/components/shared/ui/avatar/description.tsx
@@ -0,0 +1,14 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { forwardRef } from "react";
+
+import { clsx } from "lib/clsx";
+
+type Props = ComponentPropsWithoutRef<"span">;
+
+export const Description = forwardRef<HTMLSpanElement, Props>(({ children, className, ...rest }, ref) => {
+  return (
+    <span ref={ref} {...rest} className={clsx("date", className)}>
+      {children}
+    </span>
+  );
+});
diff --git a/components/shared/ui/avatar/image.tsx b/components/shared/ui/avatar/image.tsx
@@ -0,0 +1,12 @@
+import NextImage from "next/image";
+
+import type { ComponentProps, ComponentPropsWithoutRef } from "react";
+import { forwardRef } from "react";
+
+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} />;
+});
diff --git a/components/shared/ui/avatar/index.ts b/components/shared/ui/avatar/index.ts
@@ -0,0 +1,15 @@
+import { Anchor } from "./anchor";
+import { Description } from "./description";
+import { Image } from "./image";
+import { Info } from "./info";
+import { Name } from "./name";
+import { Root } from "./root";
+
+export const Avatar = {
+  Root,
+  Anchor,
+  Image,
+  Info,
+  Name,
+  Description,
+};
diff --git a/components/shared/ui/avatar/info.tsx b/components/shared/ui/avatar/info.tsx
@@ -0,0 +1,14 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { forwardRef } from "react";
+
+import { clsx } from "lib/clsx";
+
+type Props = ComponentPropsWithoutRef<"div">;
+
+export const Info = forwardRef<HTMLDivElement, Props>(({ children, className, ...rest }, ref) => {
+  return (
+    <div ref={ref} {...rest} className={clsx("info", className)}>
+      {children}
+    </div>
+  );
+});
diff --git a/components/shared/ui/avatar/name.tsx b/components/shared/ui/avatar/name.tsx
@@ -0,0 +1,14 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { forwardRef } from "react";
+
+import { clsx } from "lib/clsx";
+
+type Props = ComponentPropsWithoutRef<"span">;
+
+export const Name = forwardRef<HTMLSpanElement, Props>(({ children, className, ...rest }, ref) => {
+  return (
+    <span ref={ref} {...rest} className={clsx("author", className)}>
+      {children}
+    </span>
+  );
+});
diff --git a/components/shared/ui/avatar/root.tsx b/components/shared/ui/avatar/root.tsx
@@ -0,0 +1,14 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { forwardRef } from "react";
+
+import { clsx } from "lib/clsx";
+
+type Props = ComponentPropsWithoutRef<"div">;
+
+export const Root = forwardRef<HTMLDivElement, Props>(({ children, className, ...rest }, ref) => {
+  return (
+    <div ref={ref} {...rest} className={clsx("article-meta", className)}>
+      {children}
+    </div>
+  );
+});
diff --git a/components/shared/ui/button/button.tsx b/components/shared/ui/button/button.tsx
@@ -0,0 +1,30 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { clsx } from "lib/clsx";
+import type { Override } from "types/utilities";
+
+type Variant = "primary" | "secondary" | "info" | "success" | "warning" | "danger";
+
+type Size = "sm" | "lg";
+
+type BaseProps = {
+  variant?: Variant;
+  size?: Size;
+  outline?: boolean;
+};
+
+type Props = Override<ComponentPropsWithoutRef<"button">, BaseProps>;
+
+export const Button = forwardRef<HTMLButtonElement, Props>(
+  ({ children, className, variant = "primary", size = "sm", outline = false, ...rest }, ref) => {
+    return (
+      <button
+        ref={ref}
+        {...rest}
+        className={clsx("btn", outline ? `btn-outline-${variant}` : `btn-${variant}`, `btn-${size}`, className)}
+      >
+        {children}
+      </button>
+    );
+  },
+);
diff --git a/components/shared/ui/button/index.ts b/components/shared/ui/button/index.ts
@@ -0,0 +1 @@
+export { Button } from "./button";
diff --git a/components/shared/ui/list-item/content.tsx b/components/shared/ui/list-item/content.tsx
@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+import { forwardRef } from "react";
+import type { ComponentProps, ComponentPropsWithoutRef } from "react";
+
+import { clsx } from "lib/clsx";
+import type { Override } from "types/utilities";
+
+type Props = Override<ComponentPropsWithoutRef<"a">, ComponentProps<typeof Link>>;
+
+export const Content = forwardRef<HTMLAnchorElement, Props>(({ children, className, ...rest }, ref) => {
+  return (
+    <Link ref={ref} {...rest} className={clsx("preview-link", className)}>
+      {children}
+    </Link>
+  );
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { ArticleListItem } from "./article-list-item";