Update README.md

README.md

@@ -9,5 +9,5 @@ Currently, two official plugins are available:
 
 ## LIST PESERTA - 29 November 2024
 
-- Nusendra
-- Adit
+- Nusendra Hanggarawan
+- Aditia Falacha

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router": "^7.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

src/App.jsx

@@ -1,9 +1,16 @@
-import GetApiData from "./components/GetApiData";
+import { Outlet, NavLink } from "react-router";
 
 function App() {
   return (
     <>
-      <GetApiData />
+      <div className="flex flex-row gap-x-4 mb-4 p-2">
+        <NavLink to="/">Home</NavLink>
+        <NavLink to="/api-docs">API Docs</NavLink>
+        <NavLink to="/blog">Blog</NavLink>
+        <NavLink to="/about">About</NavLink>
+      </div>
+
+      <Outlet />
     </>
   );
 }

src/components/LinkTree.jsx

@@ -0,0 +1,38 @@
+const links = [
+  { id: 1, label: "SurabayaJS", url: "https://surabayajs.org" },
+  { id: 2, label: "LinkedIn", url: "https://linkedin.com" },
+  { id: 3, label: "Portfolio", url: "https://example.com" },
+  { id: 4, label: "Blog", url: "https://nusendra.com" },
+];
+
+const LinkTree = () => {
+  return (
+    <div className="min-h-screen bg-gray-900 flex items-center justify-center">
+      <div className="max-w-md w-full p-6 bg-gray-800 rounded-lg shadow-lg text-center">
+        <img
+          className="w-24 h-24 mx-auto rounded-full mb-4"
+          src="https://via.placeholder.com/150"
+          alt="Profile"
+        />
+        <h1 className="text-white text-xl font-bold mb-2">John Doe</h1>
+        <p className="text-gray-400 mb-4">Frontend Developer & Designer</p>
+
+        <div className="space-y-4">
+          {links.map((link) => (
+            <a
+              key={link.id}
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="block bg-blue-500 text-white py-2 px-4 rounded-lg shadow-md hover:bg-blue-600 transition"
+            >
+              {link.label}
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LinkTree;

src/components/Penjumlahan.jsx

@@ -20,6 +20,7 @@ export default function Penjumlahan() {
 
   return (
     <div>
+      <div>TEST</div>
       <input
         placeholder="masukan angka ke 1"
         value={angka1}
@@ -32,11 +33,7 @@ export default function Penjumlahan() {
       />
       <button onClick={add}>Jumlah</button>
       <p>Hasil = {hasil}</p>
-      <p>
-        Hasil ={" "}
-        {parseInt(angka1 || 0) +
-          parseInt(angka2 || 0)}
-      </p>
+      <p>Hasil = {parseInt(angka1 || 0) + parseInt(angka2 || 0)}</p>
       <p>Hasil Ref = {refHasil.current}</p>
     </div>
   );

src/main.jsx

@@ -1,10 +1,27 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './styles/index.css'
-import App from './App.jsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter, Routes, Route } from "react-router";
+import ExampleDaisyui from "./components/ExampleDaisyui";
+import Penjumlahan from "./components/Penjumlahan";
+import GetApiData from "./components/GetApiData";
+import "./styles/index.css";
+import App from "./App.jsx";
+import LinkTree from "./components/LinkTree.jsx";
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
   <StrictMode>
-    <App />
-  </StrictMode>,
-)
+    <BrowserRouter>
+      <Routes>
+        {/* <Route path="/auth" element={<Auth />}>
+          <Route path="/login" element={<ExampleDaisyui />} />
+        </Route> */}
+        <Route path="/" element={<App />}>
+          <Route path="/" element={<LinkTree />} />
+          <Route path="/blog" element={<ExampleDaisyui />} />
+          <Route path="/api-docs" element={<GetApiData />} />
+          <Route path="/about" element={<Penjumlahan />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  </StrictMode>
+);

yarn.lock

@@ -562,6 +562,11 @@
   dependencies:
     "@babel/types" "^7.20.7"
 
+"@types/cookie@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.6.0.tgz#eac397f28bf1d6ae0ae081363eca2f425bedf0d5"
+  integrity sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==
+
 "@types/[email protected]", "@types/estree@^1.0.6":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
@@ -887,6 +892,11 @@ convert-source-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
+cookie@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-1.0.2.tgz#27360701532116bd3f1f9416929d176afe1e4610"
+  integrity sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==
+
 cross-spawn@^7.0.0:
   version "7.0.6"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
@@ -2210,6 +2220,16 @@ react-refresh@^0.14.2:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
   integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==
 
+react-router@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.0.1.tgz#a171e35a5c6463f76b23353c4ce57b53c8b7b1b9"
+  integrity sha512-WVAhv9oWCNsja5AkK6KLpXJDSJCQizOIyOd4vvB/+eHGbYx5vkhcmcmwWjQ9yqkRClogi+xjEg9fNEOd5EX/tw==
+  dependencies:
+    "@types/cookie" "^0.6.0"
+    cookie "^1.0.1"
+    set-cookie-parser "^2.6.0"
+    turbo-stream "2.4.0"
+
 react@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
@@ -2347,6 +2367,11 @@ semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
+set-cookie-parser@^2.6.0:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz#3016f150072202dfbe90fadee053573cc89d2943"
+  integrity sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==
+
 set-function-length@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
@@ -2587,6 +2612,11 @@ ts-interface-checker@^0.1.9:
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
+[email protected]:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/turbo-stream/-/turbo-stream-2.4.0.tgz#1e4fca6725e90fa14ac4adb782f2d3759a5695f0"
+  integrity sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"