Refactor/frontend : Add common components

frontend-app/components/Footer.js

@@ -0,0 +1,8 @@
+const Footer = () => {
+  return (
+    <div className="">
+      <h2>This is footer</h2>
+    </div>
+  );
+}
+export default Footer;

frontend-app/components/Header.js

@@ -0,0 +1,17 @@
+import TitleXL from '@/components/common/TitleXL';
+import Avatar from '@/components/common/Avatar';
+
+const Header = () => {
+  return (
+    <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;

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;

frontend-app/components/ShopItem.js

@@ -0,0 +1,9 @@
+import Card from "@/components/common/Card"
+
+const ShopItem = () => {
+  return (
+    <Card></Card>
+  )
+}
+
+export default ShopItem

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;

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;

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;

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;

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"

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;

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
+      }
+    }],
+  }
 };