Style: using tailwind + daisy, updated style to dark mode

TheBoyRoy05 · Oct 27, 2024 · 0ab4886 · 0ab4886
1 parent 2186167
commit 0ab4886
Show file tree

Hide file tree

Showing 17 changed files with 1,469 additions and 303 deletions.
diff --git a/index.html b/index.html
@@ -2,10 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sorting Visualizer</title>
-    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" href="src/Assets/favicon.ico">
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-timer-hook": "^3.0.7"
   },
   "devDependencies": {
@@ -20,9 +21,13 @@
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.20",
+    "daisyui": "^4.12.13",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
     "typescript": "^5.2.2",
     "vite": "^5.3.1"
   }

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,11 +3,10 @@ import { FC } from "react";
 import Dashboard from "./Components/Dashboard";
 import Display from "./Components/Display";
 import InfoCards from "./Components/InfoCards";
-import "./Styles/index.css";
 
 const App: FC = () => {
   return (
-    <div className="app">
+    <div className="h-full">
       <Dashboard />
       <Display />
       <InfoCards />

diff --git a/public/favicon.ico → src/Assets/favicon.ico b/public/favicon.ico → src/Assets/favicon.ico
diff --git a/src/Components/Card.tsx b/src/Components/Card.tsx
@@ -0,0 +1,19 @@
+interface CardProps {
+  title: string;
+  children: React.ReactNode;
+  customClass?: string;
+}
+
+const Card = ({title, children, customClass}: CardProps) => {
+  return (
+    <div className={`card bg-slate-800 flex-1 p-4 border border-slate-500 ${customClass}`}>
+      <h3 className="text-center text-xl text-white font-bold helvetica">{title}</h3>
+      <div className="border-b border-slate-500 mb-4" />
+      <div className="flex flex-col gap-4">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default Card
diff --git a/src/Components/Dashboard.tsx b/src/Components/Dashboard.tsx
@@ -12,9 +12,7 @@ import {
   useQuickSort,
   useSelectionSort,
 } from "../Algorithms/SortHooks";
-import "../Styles/dashboard.css";
 import Dropdown from "./Dropdown";
-import Slider from "./Slider";
 
 const Dashboard: FC = () => {
   const {
@@ -79,31 +77,25 @@ const Dashboard: FC = () => {
   };
 
   const generateRandom = () => {
-    const heights = Array.from({ length: arraySize }, () =>
-      getRandomInt(10, 400)
-    );
+    const heights = Array.from({ length: arraySize }, () => getRandomInt(10, 400));
     createBars(heights);
   };
 
   const generateNearlySorted = () => {
-    let heights = Array.from({ length: arraySize }, () =>
-      getRandomInt(10, 400)
-    ).sort((a, b) => a - b);
+    let heights = Array.from({ length: arraySize }, () => getRandomInt(10, 400)).sort(
+      (a, b) => a - b
+    );
     if (!ascending) heights.reverse();
     for (let i = 0; i < Math.floor(arraySize / 10); i++) {
-      heights = swap(
-        heights,
-        getRandomInt(0, arraySize),
-        getRandomInt(0, arraySize)
-      );
+      heights = swap(heights, getRandomInt(0, arraySize), getRandomInt(0, arraySize));
     }
     createBars(heights);
   };
 
   const generateReverse = () => {
-    const heights = Array.from({ length: arraySize }, () =>
-      getRandomInt(10, 400)
-    ).sort((a, b) => a - b);
+    const heights = Array.from({ length: arraySize }, () => getRandomInt(10, 400)).sort(
+      (a, b) => a - b
+    );
     if (ascending) heights.reverse();
     createBars(heights);
   };
@@ -166,8 +158,7 @@ const Dashboard: FC = () => {
       ? [
           {
             text: partition,
-            handleClick: () =>
-              setPartition(partition === "Lomuto" ? "Hoare" : "Lomuto"),
+            handleClick: () => setPartition(partition === "Lomuto" ? "Hoare" : "Lomuto"),
           },
         ]
       : []),
@@ -181,32 +172,46 @@ const Dashboard: FC = () => {
   ];
 
   return (
-    <div className="dashboard">
-      <h2 className="title">Sorting Visualizer</h2>
-      <div className="board">
-        <Slider
-          text="Array Size"
-          min={4}
-          max={100}
-          step={1}
-          value={arraySize}
-          setValue={setArraySize}
-        />
-        <Dropdown text="Algorithms" options={algorithms} />
-        <Dropdown text="Generate" options={generateOptions} />
-        <button className="btn main-btn" onClick={handleSort}>
-          {"Visualize " + capitalize(sort) + " Sort!"}
-        </button>
-        <Dropdown text="Sort Options" options={sortOptions} />
-        <Dropdown text="Settings" options={settings} />
-        <Slider
-          text="Sort Speed"
-          min={1}
-          max={100}
-          step={1}
-          value={sortSpeed}
-          setValue={setSortSpeed}
-        />
+    <div className="flex bg-slate-800 px-4 py-4 border-b-2 border-slate-700">
+      <h2 className="absolute top-10 left-8 text-2xl font-bold text-white helvetica">
+        Sorting Visualizer
+      </h2>
+      <div className="flex flex-col gap-4 w-full justify-center items-center">
+        <div className="flex gap-10">
+          <div className="flex items-center gap-4">
+            <p className="text-white font-bold">{"Array Size: "}</p>
+            <input
+              className="range range-sm range-primary w-40"
+              type="range"
+              onChange={(e) => setArraySize(Number(e.target.value))}
+              min={4}
+              max={100}
+              step={1}
+              value={arraySize}
+            />
+          </div>
+          <div className="flex items-center gap-4">
+            <p className="text-white font-bold">{"Sort Speed: "}</p>
+            <input
+              className="range range-sm range-primary w-40"
+              type="range"
+              onChange={(e) => setSortSpeed(Number(e.target.value))}
+              min={1}
+              max={100}
+              step={1}
+              value={sortSpeed}
+            />
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <Dropdown text="Algorithms" options={algorithms} />
+          <Dropdown text="Generate" options={generateOptions} />
+          <button className="btn btn-primary" onClick={handleSort}>
+            {"Visualize " + capitalize(sort) + " Sort!"}
+          </button>
+          <Dropdown text="Sort Options" options={sortOptions} />
+          <Dropdown text="Settings" options={settings} />
+        </div>
       </div>
     </div>
   );

diff --git a/src/Components/Display.tsx b/src/Components/Display.tsx
@@ -12,7 +12,7 @@ const Bar: FC<BarProps> = ({ width, height, status }) => {
   const barPos = barsOnTop ? " top" : " bottom"
   return (
     <div className={"bar bar-" + status + barPos} style={style}>
-      <p className="bar-text">{width > 60 ? height : ""}</p>
+      <p className="text-white">{width >= 100 && height}</p>
     </div>
   );
 };

diff --git a/src/Components/Dropdown.tsx b/src/Components/Dropdown.tsx
@@ -1,40 +1,49 @@
-import { FC, useState } from "react";
+import { FC, useRef, useState } from "react";
 import { DropdownProps } from "../Utils/Props";
-import "../Styles/dropdown.css"
+import { GoTriangleDown, GoTriangleUp } from "react-icons/go";
 
 const Dropdown: FC<DropdownProps> = ({ text, options }) => {
-  const [selected, setSelected] = useState(false);
+  const ref = useRef<HTMLDivElement>(null); // Type the ref
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleFocus = () => setIsFocused(true);
+  const handleBlur = (event: React.FocusEvent) => {
+    // Check if the new focused element is outside the dropdown
+    if (ref.current && !ref.current.contains(event.relatedTarget as Node)) {
+      setIsFocused(false);
+    }
+  };
 
   return (
-    <div className={"dropdown " + text.toLowerCase().replace(" ", "")}>
-      <button
-        className={
-          "dropdown-text-container btn " +
-          (selected ? "show-dropdown" : "hide-dropdown")
-        }
-        onClick={() => setSelected(!selected)}
+    <div className="dropdown" ref={ref}>
+      <div
+        tabIndex={0}
+        role="button"
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        className="btn rounded-md text-white bg-slate-700 hover:bg-slate-500"
       >
-        <p className="dropdown-text">{text}</p>
-        <div className={selected ? "arrow-up" : "arrow-down"}></div>
-      </button>
-      <div className={selected ? "options" : "hide"}>
-        {options.map((option, index) => {
-          const disabled = typeof option.handleClick == "undefined";
-          return (
-            <button
-              className={disabled ? "disabled" : "btn option"}
-              onClick={() => {
-                if (option.handleClick) option.handleClick();
-                setSelected(false);
-              }}
-              key={index}
-              disabled={disabled}
-            >
-              {option.text}
-            </button>
-          );
-        })}
+        {text}
+        {isFocused ? <GoTriangleUp /> : <GoTriangleDown />}
       </div>
+      <ul
+        tabIndex={0}
+        className="dropdown-content menu bg-gray-800 rounded-box z-1 w-52 p-1 shadow join join-vertical"
+      >
+        {options.map((option, index) => (
+          <li
+            key={index}
+            onClick={option.handleClick}
+            className={`${
+              option.handleClick
+                ? "hover:cursor-pointer hover:bg-slate-600"
+                : "font-bold text-base"
+            } rounded-md py-1 px-2 text-gray-200 hover:text-white hover:font-bold border border-slate-600 join-item`}
+          >
+            {option.text}
+          </li>
+        ))}
+      </ul>
     </div>
   );
 };