Migration to daisyUI

oj-lab · Jan 30, 2024 · 8505dcc · 8505dcc
1 parent 44827cc
commit 8505dcc
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 91 deletions.
diff --git a/src/components/Copyright.tsx b/src/components/Copyright.tsx
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
diff --git a/src/components/JudgeVerdictTable.tsx b/src/components/JudgeVerdictTable.tsx
@@ -1,12 +1,3 @@
-import {
-  Table,
-  TableBody,
-  TableColumn,
-  TableHeader,
-  TableRow,
-  TableCell,
-  Chip,
-} from "@nextui-org/react";
 import { JudgeModel } from "../typings/judge";
 
 const columns = [
@@ -17,31 +8,39 @@ const columns = [
 
 export interface JudgeVerdictTableProps {
   data: JudgeModel.JudgeVerdict[];
+  className?: string;
 }
 
 const JudgeVerdictTable: React.FC<JudgeVerdictTableProps> = (props) => {
   return (
-    <Table>
-      <TableHeader columns={columns}>
-        {(column) => <TableColumn key={column.uid}>{column.name}</TableColumn>}
-      </TableHeader>
-      <TableBody items={props.data}>
-        {(item) => (
-          <TableRow key={item.id}>
-            <TableCell>
-              <Chip
-                color={item.verdict === "Accepted" ? "success" : "danger"}
-                variant="bordered"
-              >
-                {item.verdict}
-              </Chip>
-            </TableCell>
-            <TableCell>{item.time_usage}</TableCell>
-            <TableCell>{item.memory_usage}</TableCell>
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
+    <div className={props.className}>
+      <table className="table" aria-label="Judge Verdict Table">
+        <thead>
+          <tr>
+            {columns.map((column) => (
+              <th key={column.uid}>{column.name}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {props.data.map((judgeVerdict) => (
+            <tr>
+              <th>
+                <div
+                  className={`badge badge-outline ${
+                    judgeVerdict.verdict === "Accepted" ? "badge-success" : ""
+                  }`}
+                >
+                  {judgeVerdict.verdict}
+                </div>
+              </th>
+              <td>{judgeVerdict.time_usage}</td>
+              <td>{judgeVerdict.memory_usage}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 };
 

diff --git a/src/components/ProblemTable.tsx b/src/components/ProblemTable.tsx
@@ -2,7 +2,6 @@ import { TrashIcon, PencilSquareIcon } from "@heroicons/react/24/outline";
 import { ProblemServiceModel } from "../typings/problem";
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { joinClasses } from "../utils/common";
 
 const columns = [
   { name: "SLUG", uid: "slug" },
@@ -23,7 +22,7 @@ const ProblemTable: React.FC<ProblemTableProps> = (props) => {
 
   return (
     <div className={props.className}>
-      <table className={joinClasses("table")} aria-label="Problem Table">
+      <table className="table" aria-label="Problem Table">
         <thead>
           <tr>
             {columns.map((column) => {

diff --git a/src/pages/admin-dashboard/CreateProblem.tsx b/src/pages/admin-dashboard/CreateProblem.tsx
@@ -61,15 +61,16 @@ const CreateProblem: React.FC = () => {
       <div className="flex justify-between">
         <h1 className="text-3xl font-bold">{t("Create Problem")}</h1>
         <div className="flex gap-4">
-          <Button
-            variant="bordered"
+          <button
+            className="btn btn-error"
+            aria-label="Delete"
             onClick={() => {
               window.history.back();
             }}
           >
             {t("Cancel")}
-          </Button>
-          <Button color="primary">{t("Create")}</Button>
+          </button>
+          <button className="btn btn-primary">{t("Create")}</button>
         </div>
       </div>
       <div>
@@ -93,7 +94,7 @@ const CreateProblem: React.FC = () => {
             />
             {slug && slug !== "slug" && (
               <div className="flex items-center gap-2">
-                <Spinner color="warning" aria-label="Checking..." />
+                <span className="loading loading-spinner loading-md" />
                 <p className="text-sm ">{t("Checking slug is valid...")}</p>
               </div>
             )}
@@ -107,8 +108,8 @@ const CreateProblem: React.FC = () => {
               </div>
             )}
           </div>
-          <FileUploader />
-          <Divider />
+          <input type="file" className="file-input w-full max-w-xs" />
+          <div className="divider" />
           <Input
             className="w-1/2"
             isRequired={true}
@@ -119,10 +120,19 @@ const CreateProblem: React.FC = () => {
               setTitle(e.target.value);
             }}
           />
-          <Tabs aria-label="Options">
-            <Tab key="raw" title={t("Raw")}>
+          <div role="tablist" className="tabs tabs-bordered">
+            <input
+              type="radio"
+              name="raw"
+              role="tab"
+              className="tab"
+              aria-label="Raw"
+            />
+            <div role="tabpanel" className="tab-content">
               <Textarea
-                className="-mt-3"
+                role="tab"
+                className="tab"
+                aria-label="Tab 1"
                 label={t("Problem description")}
                 isRequired={true}
                 placeholder={descriptionPlaceholder}
@@ -131,18 +141,26 @@ const CreateProblem: React.FC = () => {
                   setDiscription(e.target.value);
                 }}
               />
-            </Tab>
-            <Tab key="preview" title={t("Preview")}>
-              <Card className="-mt-3" shadow="sm">
+            </div>
+
+            <input
+              type="radio"
+              name="preview"
+              role="tab"
+              className="tab"
+              aria-label="Preview"
+            />
+            <div role="tabpanel" className="tab-content">
+              <Card role="tab" className="tab" aria-label="Tab 2" shadow="sm">
                 <CardBody>
                   <MarkdownRender
                     content={description ? description : descriptionPlaceholder}
                   />
                 </CardBody>
               </Card>
-            </Tab>
-          </Tabs>
-          <Divider />
+            </div>
+          </div>
+          <div className="divider" />
           <div className="flex flex-col gap-4">
             {tags.length > 0 && (
               <div className="flex gap-2">
@@ -169,11 +187,8 @@ const CreateProblem: React.FC = () => {
                   setAddingTag(e.target.value);
                 }}
               />
-              <Button
-                size="sm"
-                radius="full"
-                isIconOnly={true}
-                color="secondary"
+              <button
+                className="btn btn-circle btn-primary btn-sm"
                 onClick={() => {
                   if (addingTag) {
                     setTags([...tags, addingTag]);
@@ -182,7 +197,7 @@ const CreateProblem: React.FC = () => {
                 }}
               >
                 <PlusIcon className="h-6 w-6" />
-              </Button>
+              </button>
             </div>
           </div>
         </CardBody>