refactor code to be used correctly

install react icons

package.json

@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.0.2",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.0.2"
+    "react-icons": "^4.12.0"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.2",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.2"
+    "typescript": "^5"
   }
 }

src/components/authLinks/AuthLinks.jsx

@@ -0,0 +1,7 @@
+import styles from "./authLinks.module.css";
+
+const AuthLinks = () => {
+  return <div className={styles.container}>AuthLinks</div>;
+};
+
+export default AuthLinks;

src/components/cardList/CardList.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import styles from "./cardList.module.css";
 import Pagination from "@/components/pagination/Pagination";
 
-export const CardList = () => {
+const CardList = () => {
   return (
     <div className={styles.container}>
       <Pagination />

src/components/categoryList/CategoryList.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./categoryList.module.css";
 
-export const CategoryList = () => {
+const CategoryList = () => {
   return <div className={styles.container}>CategoryList</div>;
 };
 

src/components/featured/Featured.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./featured.module.css";
 
-export const Featured = () => {
+const Featured = () => {
   return <div className={styles.container}>Featured</div>;
 };
 

src/components/footer/Footer.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./footer.module.css";
 
-export const Footer = () => {
+const Footer = () => {
   return <div className={styles.container}>Footer</div>;
 };
 

src/components/menu/Menu.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./menu.module.css";
 
-export const Menu = () => {
+const Menu = () => {
   return <div className={styles.container}>Menu</div>;
 };
 

src/components/navbar/Navbar.jsx

@@ -1,8 +1,29 @@
 import React from "react";
 import styles from "./navbar.module.css";
+import Link from "next/link";
+import AuthLinks from "@/components/authLinks/AuthLinks";
+import ThemeToggle from "@/components/themeToggle/ThemeToggle";
+import { FaFacebook, FaInstagram, FaTiktok, FaYoutube } from "react-icons/fa";
 
-export const Navbar = () => {
-  return <div className={styles.container}>Navbar</div>;
+const Navbar = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.social}></div>
+
+      <FaFacebook />
+      <FaInstagram />
+      <FaTiktok />
+      <FaYoutube />
+      <div className={styles.logo}>ExampleBlog</div>
+      <div className={styles.links}>
+        <ThemeToggle />
+        <Link href="/">Homepage</Link>
+        <Link href="/">Contact</Link>
+        <Link href="/">About</Link>
+        <AuthLinks />
+      </div>
+    </div>
+  );
 };
 
 export default Navbar;

src/components/pagination/Pagination.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./pagination.module.css";
 
-export const Pagination = () => {
+const Pagination = () => {
   return <div className={styles.container}>Pagination</div>;
 };
 

src/components/themeToggle/ThemeToggle.jsx

@@ -0,0 +1,7 @@
+import styles from "./themeToggle.module.css";
+
+const ThemeToggle = () => {
+  return <div className={styles.container}>ThemeToggle</div>;
+};
+
+export default ThemeToggle;