sonicname · sonicname · Jul 13, 2022 · Jul 12, 2022 · Jul 12, 2022 · Jul 13, 2022
diff --git a/assets/ghost.png b/assets/ghost.png
diff --git a/index.html b/index.html
@@ -3,11 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="shortcut icon" href="/assets/icon.ico" type="image/x-icon">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <title>Blog App</title>
+    <link rel="shortcut icon" href="/assets/ghost.png" type="image/x-icon">
+    <title>Welcome to Blog</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -17,15 +17,21 @@
     "react-markdown": "^8.0.3",
     "react-router-dom": "^6.3.0",
     "react-toastify": "^9.0.5",
+    "remark-align": "^1.2.14",
+    "remark-gfm": "^3.0.1",
+    "remark-utf8": "^1.1.0",
     "yup": "^0.32.11"
   },
   "devDependencies": {
     "@types/node": "^18.0.3",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^1.3.0",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
     "prettier": "^2.7.1",
     "sass": "^1.53.0",
+    "tailwindcss": "^3.1.6",
     "typescript": "^4.6.3",
     "vite": "^2.9.9"
   }

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -0,0 +1,22 @@
+import React, { ReactNode } from "react";
+
+interface IProps {
+  type: "button" | "submit" | "reset" | undefined;
+  children: ReactNode;
+  disabled?: boolean;
+  className?: string;
+}
+
+const Button = ({ type, children, disabled, className = "" }: IProps) => {
+  return (
+    <button
+      className={`text-white font-semibold text-[16px] w-full py-[13px] bg-[#1DC071] rounded-lg shadow-md ${className}`}
+      type={type}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/src/components/error/ErrorInput.tsx b/src/components/error/ErrorInput.tsx
diff --git a/src/components/errors/ErrorInput.tsx b/src/components/errors/ErrorInput.tsx
@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+
+interface IProps {
+  children: ReactNode;
+}
+
+const ErrorInput = ({ children }: IProps) => {
+  return (
+    <span className="text-red-500 text-[14px] font-medium">{children}</span>
+  );
+};
+
+export default ErrorInput;
diff --git a/src/components/field/Field.tsx b/src/components/field/Field.tsx
@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+
+interface IProps {
+  children: ReactNode;
+}
+
+const Field = ({ children }: IProps) => {
+  return <div className="flex flex-col gap-y-[10px]">{children}</div>;
+};
+
+export default Field;
diff --git a/src/components/heading/Heading.tsx b/src/components/heading/Heading.tsx
@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+
+interface IProps {
+  content: string;
+  children: ReactNode;
+}
+
+const Heading = ({ content, children }: IProps) => {
+  return (
+    <div className="flex flex-col gap-y-[5px] lg:gap-y-[10px] text-center">
+      <h1 className="font-semibold text-[18px] lg:text-[20px] text-white">
+        {content}
+      </h1>
+      {children}
+    </div>
+  );
+};
+
+export default Heading;
diff --git a/src/components/heading/SubHeading.tsx b/src/components/heading/SubHeading.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+interface IProps {
+  content: string;
+  hrefText: string;
+  to: string;
+}
+
+const SubHeading = ({ content, to, hrefText }: IProps) => {
+  return (
+    <p className="text-[#808191] text-[14px]">
+      {content}{" "}
+      <span className="text-[#1DC071] font-medium underline">
+        <NavLink to={to}>{hrefText}</NavLink>
+      </span>
+    </p>
+  );
+};
+
+export default SubHeading;
diff --git a/src/components/icons/IconMenu.tsx b/src/components/icons/IconMenu.tsx
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
@@ -2,32 +2,24 @@ import React from "react";
 import { Control, useController } from "react-hook-form";
 
 interface IProps {
-  name: string;
   type: string;
-  placeholder: string;
   control: Control;
-  className: string;
-  defaultValue?: string;
+  name: string;
+  placeholder?: string;
 }
 
-const Input = ({
-  control,
-  type,
-  placeholder,
-  name,
-  className,
-  defaultValue,
-}: IProps) => {
+const Input = ({ type, control, name, placeholder }: IProps) => {
   const { field } = useController({
-    control,
-    name,
-    defaultValue: defaultValue,
+    control: control,
+    name: name,
+    defaultValue: "",
   });
 
   return (
     <input
+      id={name}
       type={type}
-      className={className}
+      className="border border-[#3A3A43] rounded-md w-full p-[15px] shadow outline-none text-white font-medium text-[14px] placeholder:text-[#4B5264] bg-transparent"
       placeholder={placeholder}
       {...field}
     />

diff --git a/src/components/label/Label.tsx b/src/components/label/Label.tsx
@@ -1,15 +1,14 @@
-import React, { ReactNode } from "react";
+import React from "react";
 
 interface IProps {
+  text: string;
   htmlFor: string;
-  children: ReactNode;
-  className: string;
 }
 
-const Label = ({ htmlFor, children, className }: IProps) => {
+const Label = ({ text, htmlFor }: IProps) => {
   return (
-    <label className={className} htmlFor={htmlFor}>
-      {children}
+    <label htmlFor={htmlFor} className="text-[#808191] font-medium text-[14px]">
+      {text}
     </label>
   );
 };

diff --git a/src/components/layouts/AuthLayout.tsx b/src/components/layouts/AuthLayout.tsx
@@ -0,0 +1,24 @@
+import React, { ReactNode } from "react";
+import logo from "../../../assets/ghost.png";
+import { NavLink } from "react-router-dom";
+
+interface IProps {
+  children: ReactNode;
+}
+
+const AuthLayout = ({ children }: IProps) => {
+  return (
+    <div className="block p-6 lg-[40px] relative w-full h-screen flex items-center justify-center">
+      <NavLink to={"/"}>
+        <img
+          className="absolute w-10 lg:w-[56px] h-10 lg:h-[56px] object-cover top-10 left-10"
+          src={logo}
+          alt="logo blog"
+        />
+      </NavLink>
+      {children}
+    </div>
+  );
+};
+
+export default AuthLayout;
diff --git a/src/components/layouts/CommonLayout.tsx b/src/components/layouts/CommonLayout.tsx
@@ -2,15 +2,14 @@ import React, { ReactNode } from "react";
 import Header from "./Header";
 
 interface IProps {
-  children?: ReactNode;
+  children: ReactNode;
 }
 
 const CommonLayout = ({ children }: IProps) => {
   return (
-    <div className="container">
+    <div className="px-6 py-[26px] lg:p-10 flex flex-col gap-y-5 lg:gap-y-[30px] text-white">
       <Header />
       {children}
-      <footer className="footer"></footer>
     </div>
   );
 };