Aztriltus · sushanyadav · Jan 24, 2024
diff --git a/src/actions/README.md b/src/actions/README.md
@@ -0,0 +1,8 @@
+## Actions folder
+
+This folder contains all the server actions that will be used in the app.
+
+### How to organise this folder
+
+The name of the file should be similar to the name of the page.
+For example, if you want to create a server action for a page called `Dashboard`, the file should be called `dashboard.ts`. So that it is easy to find the actions for a specific page.
diff --git a/src/actions/home.ts b/src/actions/home.ts
@@ -0,0 +1,25 @@
+'use server';
+
+export type PostType = {
+  id: number;
+  title: string;
+  completed: boolean;
+};
+
+export const getPosts = async () => {
+  // mimic api call
+  try {
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/todos?_limit=5',
+    );
+    const data = await response.json();
+
+    return { posts: data as PostType[] };
+  } catch (error) {
+    return {
+      error: {
+        message: 'Something went wrong',
+      },
+    };
+  }
+};
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,41 @@
+import { Metadata, Viewport } from 'next';
+import type { PropsWithChildren } from 'react';
+
+import { CoreLayout } from '@/common/components/CoreLayout';
+import { Favicon } from '@/common/components/FavIcon';
+import { inter } from '@/common/fonts';
+import '@/common/styles/globals.scss';
+
+export const viewport: Viewport = {
+  themeColor: 'black',
+};
+
+export const metadata: Metadata = {
+  title: 'Your App Name | Home',
+  description: 'Your app description',
+  metadataBase: new URL('https://google.com'),
+  openGraph: {
+    title: 'Your App Name',
+    description: 'Your app description',
+    url: 'https://google.com',
+    siteName: 'Your App Name',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    site: '@username',
+    creator: '@username',
+  },
+};
+
+const GlobalLayout = ({ children }: PropsWithChildren) => {
+  return (
+    <html className={[inter.variable].join(' ')} lang="en">
+      <Favicon />
+      <body>
+        <CoreLayout>{children}</CoreLayout>
+      </body>
+    </html>
+  );
+};
+
+export default GlobalLayout;
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1,9 @@
+const Error404 = () => {
+  return (
+    <section className="grid h-full place-content-center">
+      Page not found
+    </section>
+  );
+};
+
+export default Error404;
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -0,0 +1,11 @@
+import { Posts } from '@/modules/Home/Posts';
+
+const Homepage = async () => {
+  return (
+    <section className="grid h-full place-content-center">
+      <Posts />
+    </section>
+  );
+};
+
+export default Homepage;
diff --git a/src/common/components/PageHead/PageHead.tsx b/src/common/components/PageHead/PageHead.tsx
diff --git a/src/common/components/PageHead/index.ts b/src/common/components/PageHead/index.ts
diff --git a/src/common/fonts/index.ts b/src/common/fonts/index.ts
@@ -0,0 +1 @@
+export * from './urbanist';
diff --git a/src/common/fonts/urbanist.ts b/src/common/fonts/urbanist.ts
@@ -0,0 +1,6 @@
+import { Urbanist } from 'next/font/google';
+
+export const inter = Urbanist({
+  subsets: ['latin'],
+  variable: '--font-urbanist',
+});
diff --git a/src/modules/Home/Post.tsx b/src/modules/Home/Post.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { PostType } from '@/actions/home';
+
+interface PostProps {
+  post: PostType;
+}
+
+export const Post = ({ post }: PostProps) => {
+  return (
+    <div
+      key={post.id}
+      className="flex items-center justify-between gap-8 rounded-lg border border-transparent bg-zinc-100 p-4 transition-all hover:border-neutral-100 hover:bg-stone-50 hover:shadow-sm"
+    >
+      <h1 className="text-sm capitalize text-zinc-600">{post.title}</h1>
+      <p className="text-[9px]">{post.completed ? '✅' : '❌'}</p>
+    </div>
+  );
+};
diff --git a/src/modules/Home/Posts.tsx b/src/modules/Home/Posts.tsx
@@ -0,0 +1,22 @@
+import { Post } from '@/modules/Home/Post';
+
+import { getPosts } from '@/actions/home';
+
+export const Posts = async () => {
+  const data = await getPosts();
+
+  if (data.posts) {
+    const posts = data.posts.map((post) => {
+      return <Post key={post.id} post={post} />;
+    });
+
+    return (
+      <div className="rounded-lg bg-zinc-50 p-4 shadow-md">
+        <h1 className="mb-4 text-center text-2xl">Posts</h1>
+        <div className="space-y-2">{posts}</div>
+      </div>
+    );
+  }
+
+  return <>{data.error.message}</>;
+};
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,11 +1,17 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss';
+import { fontFamily } from 'tailwindcss/defaultTheme';
 
-export default {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+const tailwindConfig = {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
+      fontFamily: {
+        sans: ['var(--font-urbanist)', 'Urbanist', ...fontFamily.sans],
+      },
       colors: {},
     },
   },
   plugins: [],
 } satisfies Config;
+
+export default tailwindConfig;
diff --git a/tsconfig.json b/tsconfig.json
@@ -16,9 +16,16 @@
     "jsx": "preserve",
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
-    }
+      "@/*": ["src/*"],
+    },
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "./**/.*"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "./**/.*",
+    ".next/types/**/*.ts",
+  ],
+  "exclude": ["node_modules"],
 }