From 9e0ffebd038c3091a9c3644f43a093b11fe3b9d9 Mon Sep 17 00:00:00 2001
From: spksoft <spkrsk.37@gmail.com>
Date: Sun, 6 Nov 2022 16:47:48 +0700
Subject: [PATCH 1/5] chore(frontend): add daisyui chore(frontend): enable
 light theme only

---
 frontend-app/package.json       |  1 +
 frontend-app/tailwind.config.js | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend-app/package.json b/frontend-app/package.json
index 096a839..c85568c 100644
--- a/frontend-app/package.json
+++ b/frontend-app/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
+    "daisyui": "^2.38.1",
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
diff --git a/frontend-app/tailwind.config.js b/frontend-app/tailwind.config.js
index 4842997..6c9876d 100644
--- a/frontend-app/tailwind.config.js
+++ b/frontend-app/tailwind.config.js
@@ -7,5 +7,13 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: [{
+      light: {
+        ...require("daisyui/src/colors/themes")["[data-theme=light]"],
+        // Customize light theme here
+      }
+    }],
+  }
 };

From 14b5f0191b2bb3019e7b827f0f9f1bab44a82c5a Mon Sep 17 00:00:00 2001
From: spksoft <spkrsk.37@gmail.com>
Date: Sun, 6 Nov 2022 17:04:10 +0700
Subject: [PATCH 2/5] chore(frontend): remove header component for make it
 upper case

---
 frontend-app/components/header.js | 8 --------
 1 file changed, 8 deletions(-)
 delete mode 100644 frontend-app/components/header.js

diff --git a/frontend-app/components/header.js b/frontend-app/components/header.js
deleted file mode 100644
index 561a763..0000000
--- a/frontend-app/components/header.js
+++ /dev/null
@@ -1,8 +0,0 @@
-function Header() {
-    return (
-        <div className="header">
-            <h2>TEST app</h2>
-        </div>
-    );
-}
-export default Header;
\ No newline at end of file

From 8c704c95a2e0e93fedecffd9581b9a2e52b35c4e Mon Sep 17 00:00:00 2001
From: spksoft <spkrsk.37@gmail.com>
Date: Sun, 6 Nov 2022 17:04:58 +0700
Subject: [PATCH 3/5] chore(frontend): rename header by adding Header

---
 frontend-app/components/Header.js | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 frontend-app/components/Header.js

diff --git a/frontend-app/components/Header.js b/frontend-app/components/Header.js
new file mode 100644
index 0000000..47cc5ed
--- /dev/null
+++ b/frontend-app/components/Header.js
@@ -0,0 +1,8 @@
+function Header() {
+  return (
+    <div className="header">
+      <h2>TEST app</h2>
+    </div>
+  );
+}
+export default Header;
\ No newline at end of file

From e675556ef4448e00e87caa52b3945dd3a1aaadd4 Mon Sep 17 00:00:00 2001
From: spksoft <spkrsk.37@gmail.com>
Date: Mon, 7 Nov 2022 19:39:48 +0700
Subject: [PATCH 4/5] feat(frontend): add common component

---
 frontend-app/components/Footer.js         |  8 ++++++++
 frontend-app/components/Header.js         | 17 +++++++++++++----
 frontend-app/components/PageLayout.js     | 17 +++++++++++++++++
 frontend-app/components/common/Avatar.js  | 11 +++++++++++
 frontend-app/components/common/Card.js    | 13 +++++++++++++
 frontend-app/components/common/Layout.js  | 23 +++++++++++++++++++++++
 frontend-app/components/common/TitleXL.js |  9 +++++++++
 frontend-app/pages/index.js               | 17 ++++++++++++++---
 8 files changed, 108 insertions(+), 7 deletions(-)
 create mode 100644 frontend-app/components/Footer.js
 create mode 100644 frontend-app/components/PageLayout.js
 create mode 100644 frontend-app/components/common/Avatar.js
 create mode 100644 frontend-app/components/common/Card.js
 create mode 100644 frontend-app/components/common/Layout.js
 create mode 100644 frontend-app/components/common/TitleXL.js

diff --git a/frontend-app/components/Footer.js b/frontend-app/components/Footer.js
new file mode 100644
index 0000000..7d4f87c
--- /dev/null
+++ b/frontend-app/components/Footer.js
@@ -0,0 +1,8 @@
+const Footer = () => {
+  return (
+    <div className="">
+      <h2>This is footer</h2>
+    </div>
+  );
+}
+export default Footer;
\ No newline at end of file
diff --git a/frontend-app/components/Header.js b/frontend-app/components/Header.js
index 47cc5ed..9ae64cb 100644
--- a/frontend-app/components/Header.js
+++ b/frontend-app/components/Header.js
@@ -1,8 +1,17 @@
-function Header() {
+import TitleXL from '@/components/common/TitleXL';
+import Avatar from '@/components/common/Avatar';
+
+const Header = () => {
   return (
-    <div className="header">
-      <h2>TEST app</h2>
-    </div>
+    <nav className="flex justify-between h-14 border-b-2 border-neutral">
+      <div className='flex items-center'>
+        <TitleXL className="text-primary">Repair Community</TitleXL>
+      </div>
+
+      <div className='flex items-center'>
+        <Avatar src='https://placeimg.com/192/192/people' className='w-10' />
+      </div>
+    </nav>
   );
 }
 export default Header;
\ No newline at end of file
diff --git a/frontend-app/components/PageLayout.js b/frontend-app/components/PageLayout.js
new file mode 100644
index 0000000..ec1ee90
--- /dev/null
+++ b/frontend-app/components/PageLayout.js
@@ -0,0 +1,17 @@
+import Layout from '@/components/common/Layout'
+import Header from '@/components/Header'
+import Footer from '@/components/Footer';
+
+const PageLayout = ({ children }) => {
+  return (
+    <Layout
+      header={<Header />}
+      footer={<Footer />}
+    >
+      {children}
+    </Layout>
+  );
+}
+
+
+export default PageLayout;
\ No newline at end of file
diff --git a/frontend-app/components/common/Avatar.js b/frontend-app/components/common/Avatar.js
new file mode 100644
index 0000000..f0de319
--- /dev/null
+++ b/frontend-app/components/common/Avatar.js
@@ -0,0 +1,11 @@
+const Avatar = ({ src, className = "" }) => {
+  return (
+    <div className="avatar">
+      <div className={`rounded-full ${className}`}>
+        <img src={src} />
+      </div>
+    </div>
+  )
+}
+
+export default Avatar;
\ No newline at end of file
diff --git a/frontend-app/components/common/Card.js b/frontend-app/components/common/Card.js
new file mode 100644
index 0000000..8a00438
--- /dev/null
+++ b/frontend-app/components/common/Card.js
@@ -0,0 +1,13 @@
+const Card = ({ children, className = "" }) => {
+  return (
+    <>
+      <div className="card w-56 bg-base-100 shadow-xl">
+        <div className={`card-body ${className}`}>
+          {children}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Card;
\ No newline at end of file
diff --git a/frontend-app/components/common/Layout.js b/frontend-app/components/common/Layout.js
new file mode 100644
index 0000000..67c50d2
--- /dev/null
+++ b/frontend-app/components/common/Layout.js
@@ -0,0 +1,23 @@
+const Layout = ({ header, children, footer }) => {
+  return (
+    <div className="flex flex-col space-y-4 w-full">
+      <div className="flex justify-center">
+        <div className="max-w-5xl w-full">
+          {header}
+        </div>
+      </div>
+      <div className="flex justify-center">
+        <div className="max-w-4xl w-full">
+          {children}
+        </div>
+      </div>
+      <div className="flex justify-center">
+        <div className=" max-w-5xl w-full">
+          {footer}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Layout;
\ No newline at end of file
diff --git a/frontend-app/components/common/TitleXL.js b/frontend-app/components/common/TitleXL.js
new file mode 100644
index 0000000..cb7dc7f
--- /dev/null
+++ b/frontend-app/components/common/TitleXL.js
@@ -0,0 +1,9 @@
+const TitleXL = ({ children, className = "" }) => {
+  return (
+    <>
+      <h1 className={`text-xl font-bold ${className}`}>{children}</h1>
+    </>
+  )
+}
+
+export default TitleXL;
\ No newline at end of file
diff --git a/frontend-app/pages/index.js b/frontend-app/pages/index.js
index a938aea..34e9596 100644
--- a/frontend-app/pages/index.js
+++ b/frontend-app/pages/index.js
@@ -1,4 +1,15 @@
-const Home = () => {
-  return <div>Home page</div>;
+import PageLayout from '@/components/PageLayout';
+
+const HomePresenter = () => {
+  return (
+    <PageLayout>
+      <div>Home page</div>
+    </PageLayout>
+
+  );
+}
+
+const Page = () => {
+  return <HomePresenter />;
 };
-export default Home;
+export default Page;

From 36993ed45cd9aeb8dd5055fb5e40874bdc527111 Mon Sep 17 00:00:00 2001
From: spksoft <spkrsk.37@gmail.com>
Date: Mon, 7 Nov 2022 20:24:26 +0700
Subject: [PATCH 5/5] feat(frontend): add ShopItem component

---
 frontend-app/components/ShopItem.js | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 frontend-app/components/ShopItem.js

diff --git a/frontend-app/components/ShopItem.js b/frontend-app/components/ShopItem.js
new file mode 100644
index 0000000..30b9893
--- /dev/null
+++ b/frontend-app/components/ShopItem.js
@@ -0,0 +1,9 @@
+import Card from "@/components/common/Card"
+
+const ShopItem = () => {
+  return (
+    <Card></Card>
+  )
+}
+
+export default ShopItem
\ No newline at end of file