Modified the file fomat to jsx, fixed the homepage

team-nameless · Sep 11, 2024 · 8cd0679 · 8cd0679
1 parent e6ff6be
commit 8cd0679
Show file tree

Hide file tree

Showing 38 changed files with 1,823 additions and 421 deletions.
diff --git a/MSOC/package-lock.json b/MSOC/package-lock.json
diff --git a/MSOC/package.json b/MSOC/package.json
@@ -9,7 +9,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
-    "react-router-dom": "^6.26.0",
+    "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -38,6 +38,7 @@
     ]
   },
   "devDependencies": {
-    "tailwindcss": "^3.4.9"
+    "tailwind": "^4.0.0",
+    "tailwindcss": "^3.4.10"
   }
 }
diff --git a/MSOC/public/DC_MSOC.png b/MSOC/public/DC_MSOC.png
diff --git a/MSOC/public/FB_MSOC.png b/MSOC/public/FB_MSOC.png
diff --git a/MSOC/public/Youtube_MSOC.png b/MSOC/public/Youtube_MSOC.png
diff --git a/MSOC/public/collab.png b/MSOC/public/collab.png
diff --git a/MSOC/public/leaderboardFrame.png b/MSOC/public/leaderboardFrame.png
diff --git a/MSOC/public/switchToGroup.png b/MSOC/public/switchToGroup.png
diff --git a/MSOC/public/switchToPlayer.png b/MSOC/public/switchToPlayer.png
diff --git a/MSOC/public/x_MSOC.png b/MSOC/public/x_MSOC.png
diff --git a/MSOC/src/App.js b/MSOC/src/App.js
diff --git a/MSOC/src/App.jsx b/MSOC/src/App.jsx
@@ -0,0 +1,21 @@
+import { Outlet } from "react-router-dom";
+import Header from "./component/Header";
+
+export default function App() {
+    return (
+        <>
+        <head>
+        <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'></link>
+        <title>MSOC</title>
+        </head>
+            <Header />
+            <body className="max-h-screen">
+                <div className="bg-[url('../public/background.png')] bg-cover h-fit">
+                    <div className="container mx-auto">
+                        <Outlet />
+                    </div>
+                </div>
+            </body>
+        </>
+    );
+}
diff --git a/MSOC/src/App.test.js b/MSOC/src/App.test.js
diff --git a/MSOC/src/component/About.js b/MSOC/src/component/About.js
diff --git a/MSOC/src/component/Header.js b/MSOC/src/component/Header.js
diff --git a/MSOC/src/component/Header.jsx b/MSOC/src/component/Header.jsx
@@ -0,0 +1,80 @@
+import React from "react";
+import { FaDiscord } from "react-icons/fa6";
+import { Link } from "react-router-dom";
+
+export default function Header() {
+    return (
+
+        <header className="fixed w-full min-h-20 max-h-20">
+            <div className="container w-full min-h-20 max-h-20 flex justify-center pt-3 pb-1 mx-auto drop-shadow-xl">
+                <nav className="flex items-center justify-between p-2 lg:px-8 border-4 rounded-xl border-transparent bg-[#F9C791] w-full drop-shadow-lg">
+                    <div className="justify-start max-w-[120px]">
+                        <a href="/" className="max-w-[120px]">
+                            <img src="../fac_1.png" alt="" className="object-cover" />
+                        </a>
+                    </div>
+                    <div className="h-full mr-auto lg:flex justify-center font">
+                        <Link
+                            to="/home"
+                            className="text-xl flex items-center justify-center font-semibold leading-6 text-black w-[125px]"
+                        >
+                            Trang Chủ
+                        </Link>
+                        <Link
+                            to="/info"
+                            className="text-xl flex items-center justify-center font-semibold leading-6 text-black w-[125px]"
+                        >
+                            Thông Tin
+                        </Link>
+                        <Link
+                            to="/leaderboard"
+                            className="text-xl flex items-center justify-center font-semibold leading-6 text-black w-[125px]"
+                        >
+                            Xếp hạng
+                        </Link>
+                        <Link
+                            to="/about"
+                            className=" text-xl flex items-center justify-center font-semibold leading-6 text-black w-[125px]"
+                        >
+                            Nhân sự
+                        </Link>
+                    </div>
+
+                    <div className=" justify-end ">
+                        <button className="flex w-36 items-center justify-between">
+                            <img className="size-1/4" src="../Youtube_MSOC.png" alt="DC_Logo" />
+                            <a href="https://discord.gg/PMVTHDgerp">
+                            </a>
+                        </button>
+                    </div>
+
+                    <div className=" justify-end ">
+                        <button className="flex w-36 space-x-1 items-center justify-between">
+                            <img className="size-1/4" src="../x_MSOC.png" alt="DC_Logo" />
+                            <a href="https://discord.gg/PMVTHDgerp">
+                            </a>
+                        </button>
+                    </div>
+
+                    <div className=" justify-end ">
+                        <button className="flex w-36 space-x-1 items-center justify-between">
+                            <img className="size-1/4" src="../DC_MSOC.png" alt="DC_Logo" />
+                            <a href="https://discord.gg/PMVTHDgerp">
+                            </a>
+                        </button>
+                    </div>
+
+
+                    <div className=" justify-end ">
+                        <button className="flex w-36 space-x-1 items-center justify-between">
+                            <img className="size-1/4" src="../FB_MSOC.png" alt="FB_Logo" />
+                            <a href="https://discord.gg/PMVTHDgerp">
+                            </a>
+                        </button>
+
+                    </div>
+                </nav>
+            </div>
+        </header>
+    );
+}
diff --git a/MSOC/src/component/Home.js b/MSOC/src/component/Home.js
diff --git a/MSOC/src/component/Info.js b/MSOC/src/component/Info.js
diff --git a/MSOC/src/component/Info/DataNode.jsx b/MSOC/src/component/Info/DataNode.jsx
@@ -0,0 +1,9 @@
+export default function DataNode({ value }) {
+  return (
+    <li className="top-[-5px] m-0 p-0 text-[#00cec9] font-[verdana] text-[14px] list-none relative after:content-[''] block w-[12px] h-[12px] rounded-[50%] bg-[#81ecec] border-[2px] border-[solid] border-[#81ecec] [transition:background-color_.2s_ease]">
+      <span className="absolute top-[20px] left-2/4 -translate-x-1/2 translate-y-[0] inline-block text-center w-[100px]">
+        {value.time}
+      </span>
+    </li>
+  );
+}
diff --git a/MSOC/src/component/Leaderboard.js b/MSOC/src/component/Leaderboard.js