Merge pull request #1570 from acm-ucr/mailyn/ResourcesPage

Mailyn/resources page

cypress/component/admin/Tab.cy.jsx

@@ -1,4 +1,4 @@
-import Tab from "@/components/admin/services/statistics/Tab.jsx";
+import Tab from "@/components/admin/services/statistics/Tab";
 
 describe("Tab", () => {
   it("Tab-box", () => {

cypress/component/user/Hackpack.cy.jsx

@@ -1,4 +1,5 @@
-import Hackpack from "@/components/user/Hackpack";
+import Hackpack from "@/components/user/resources/Hackpack";
+
 describe("HackPacks", () => {
   it("HackPack Components", () => {
     const techs = [
@@ -18,17 +19,12 @@ describe("HackPacks", () => {
     cy.get('[data-cy="hackpack-link"]')
       .should(
         "have.class",
-        "w-full rounded-xl border-2 border-gray-100 bg-gray-100 p-4 duration-300 hover:border-gray-300",
+        "flex items-center justify-between opacity-100 hover:opacity-70",
       )
       .should("have.attr", "href", link)
       .should("have.attr", "target", "_black");
 
-    cy.get('[data-cy="hackpack-text"]').should(
-      "have.class",
-      "font-bold",
-      "contain.text",
-      "Hackpack",
-    );
+    cy.get('[data-cy="hackpack-text"]').should("contain.text", "Hackpack");
 
     cy.get('[data-cy="hackpack-techs"]')
       .should("have.class", "flex flex-wrap", "have.length", techs.length)
@@ -39,7 +35,7 @@ describe("HackPacks", () => {
 
       cy.get('[data-cy="hackpack-icon"]')
         .eq(index)
-        .should("have.class", "mr-1 text-hackathon-blue-100");
+        .should("have.class", "text-hackathon-blue-100");
     });
   });
 });

src/app/loading.js

@@ -1,2 +1,2 @@
-import Loading from "@/components/Loading.jsx";
+import Loading from "@/components/Loading";
 export default Loading;

src/app/user/resources/page.js

@@ -0,0 +1,17 @@
+import ProtectedPage from "@/components/ProtectedPage";
+import Resources from "@/components/user/resources/Resources";
+
+const Page = () => {
+  return (
+    <ProtectedPage
+      title="User | Resources"
+      restrictions={{
+        participants: [1],
+      }}
+    >
+      <Resources />
+    </ProtectedPage>
+  );
+};
+
+export default Page;

src/components/admin/services/calendar/Toolbar.jsx

@@ -1,5 +1,5 @@
-import { LABELS } from "@/data/admin/Calendar.js";
-import Tag from "../../Tag.jsx";
+import { LABELS } from "@/data/admin/Calendar";
+import Tag from "../../Tag";
 import { COLORS } from "@/data/Tags.js";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useCallback, useEffect } from "react";

src/components/admin/services/judging/Judging.jsx

@@ -1,8 +1,8 @@
 "use client";
 import { useState } from "react";
-import Title from "../../Title.jsx";
-import Table from "./Table.jsx";
-import Toolbar from "./Toolbar.jsx";
+import Title from "../../Title";
+import Table from "./Table";
+import Toolbar from "./Toolbar";
 
 const Judging = () => {
   const [teams, setTeams] = useState(null);

src/components/form/Admin.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import Form from "@/components/form/form/Form.jsx";
+import Form from "@/components/form/form/Form";
 import { FIELDS, ATTRIBUTES } from "@/data/form/Admins";
 import { useSession } from "next-auth/react";
 import { api } from "@/utils/api";

src/components/form/Committee.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import Form from "@/components/form/form/Form.jsx";
+import Form from "@/components/form/form/Form";
 import { FIELDS, ATTRIBUTES } from "@/data/form/Committees";
 import { useSession } from "next-auth/react";
 import { api } from "@/utils/api";

src/components/form/Feedback.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import Form from "@/components/form/form/Form.jsx";
+import Form from "@/components/form/form/Form";
 import { FIELDS, ATTRIBUTES } from "@/data/form/Feedback.js";
 import { api } from "@/utils/api";
 import toaster from "@/utils/toaster";

src/components/form/Ideas.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import Form from "@/components/form/form/Form.jsx";
+import Form from "@/components/form/form/Form";
 import { FIELDS, ATTRIBUTES } from "@/data/form/Ideas";
 import { api } from "@/utils/api";
 import toaster from "@/utils/toaster";

src/components/form/Interest.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import Form from "@/components/form/form/Form.jsx";
+import Form from "@/components/form/form/Form";
 import { api } from "@/utils/api";
 import toaster from "@/utils/toaster";
 import { FIELDS, ATTRIBUTES } from "@/data/form/Interest";

src/components/form/Judge.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import Form from "@/components/form/form/Form.jsx";
+import Form from "@/components/form/form/Form";
 import { FIELDS, ATTRIBUTES } from "@/data/form/Judge.js";
 import { useSession } from "next-auth/react";
 import { api } from "@/utils/api";

src/components/form/Lead.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import Form from "@/components/form/form/Form.jsx";
+import Form from "@/components/form/form/Form";
 import { FIELDS, ATTRIBUTES } from "@/data/form/Leads";
 import { useSession } from "next-auth/react";
 import { api } from "@/utils/api";

src/components/form/Mentor.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import Form from "@/components/form/form/Form.jsx";
+import Form from "@/components/form/form/Form";
 import { FIELDS, ATTRIBUTES } from "@/data/form/Mentors.js";
 import { useSession } from "next-auth/react";
 import { api } from "@/utils/api";

src/components/form/Panelist.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import Form from "@/components/form/form/Form.jsx";
+import Form from "@/components/form/form/Form";
 import { FIELDS, ATTRIBUTES } from "@/data/form/Panelists.js";
 import { useSession } from "next-auth/react";
 import { api } from "@/utils/api";

src/components/form/Participant.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import Form from "@/components/form/form/Form.jsx";
+import Form from "@/components/form/form/Form";
 import { FIELDS, ATTRIBUTES } from "@/data/form/Participant.js";
 import { useSession } from "next-auth/react";
 import { api } from "@/utils/api";

src/components/form/Sponsor.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import Form from "@/components/form/form/Form.jsx";
+import Form from "@/components/form/form/Form";
 import { FIELDS, ATTRIBUTES } from "@/data/form/Sponsors";
 import { useSession } from "next-auth/react";
 import { api } from "@/utils/api";

src/components/form/Volunteer.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import Form from "@/components/form/form/Form.jsx";
+import Form from "@/components/form/form/Form";
 import { FIELDS, ATTRIBUTES } from "@/data/form/Volunteers.js";
 import { useSession } from "next-auth/react";
 import { api } from "@/utils/api";

src/components/form/form/Questions.jsx

@@ -2,7 +2,7 @@ import Select from "@/components/Select";
 import Radio from "@/components/Radio";
 import Checkbox from "@/components/Checkbox";
 import Input from "@/components/Input";
-import Button from "@/components/Button.jsx";
+import Button from "@/components/Button";
 import { Textarea } from "@/components/ui/textarea";
 import Upload from "@/components/form/form/Upload";
 import toaster from "@/utils/toaster";

src/components/form/form/Status.jsx

@@ -1,6 +1,6 @@
 import Tag from "../../admin/Tag";
 import { COLORS } from "@/data/Tags";
-import Button from "@/components/Button.jsx";
+import Button from "@/components/Button";
 
 const Status = ({ object, statuses, setState }) => {
   return (

src/components/user/CheckIn.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Image from "next/image.js";
-import Title from "../admin/Title.jsx";
+import Title from "../admin/Title";
 import { QRCodeSVG } from "qrcode.react";
 import { useState, useEffect } from "react";
 import { useSession } from "next-auth/react";

src/components/user/Dashboard.jsx

@@ -6,18 +6,14 @@ import Tile from "./Tile";
 import { QrCode, ParkingCircle } from "lucide-react";
 import Rooms from "./Rooms";
 import Packing from "./Packing";
-import Hackpacks from "./Hackpacks";
 import BulletList from "./BulletList";
-import { useState } from "react";
 import BulletPoints from "./BulletPoints";
 import { JUDGING } from "@/data/user/Judging";
 import { RULES } from "@/data/user/Rules";
-import Collapse from "./Collapse";
+import Resources from "./Resources";
 
 const Dashboard = () => {
   const { data: session } = useSession();
-  const [expand, setExpand] = useState("Rules");
-
   return (
     <div className="flex h-full flex-col gap-3 py-4 font-poppins">
       <Header email={session.user.email} name={session.user.name} />
@@ -43,9 +39,7 @@ const Dashboard = () => {
           <BulletList text="Judging">
             <BulletPoints list={JUDGING} />
           </BulletList>
-          <Collapse setExpand={setExpand} expand={expand} text="Hackpacks">
-            <Hackpacks />
-          </Collapse>
+          <Resources />
         </div>
       </div>
     </div>

src/components/user/Resources.tsx

@@ -0,0 +1,17 @@
+import { Link as LinkLucide } from "lucide-react";
+import Link from "next/link";
+
+const Resources = () => {
+  return (
+    <Link href="/user/resources">
+      <div className="w-full rounded-xl bg-white p-4 shadow-xl">
+        <div className="flex cursor-pointer items-center justify-between text-xl font-bold">
+          <p>Resources</p>
+          <LinkLucide />
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default Resources;

src/components/user/resources/Hackpack.tsx

@@ -0,0 +1,47 @@
+import { TECHSTACKS } from "@/data/user/Hackpacks";
+import Link from "next/link";
+import { SiGithub as Github } from "@icons-pack/react-simple-icons";
+
+type props = {
+  text: string;
+  techs: string[];
+  link: string;
+  description: string;
+};
+
+const Hackpack = ({ text, techs, link, description }: props) => {
+  return (
+    <div className="rounded-xl bg-white p-3">
+      <Link
+        data-cy="hackpack-link"
+        className="flex items-center justify-between opacity-100 hover:opacity-70"
+        href={link}
+        target="_black"
+      >
+        <p className="text-lg font-semibold" data-cy="hackpack-text">
+          {text}
+        </p>
+        <Github size={20} />
+      </Link>
+
+      <div className="my-2 flex flex-wrap gap-2" data-cy="hackpack-techs">
+        {techs.map((tech, index) => (
+          <div
+            key={index}
+            className="flex items-center gap-2 text-gray-400"
+            data-cy="hackpack-tech"
+          >
+            <div className="text-hackathon-blue-100" data-cy="hackpack-icon">
+              {TECHSTACKS[tech]}
+            </div>
+            {tech}
+          </div>
+        ))}
+
+        <p className="mt-2">{description}</p>
+      </div>
+    </div>
+  );
+};
+
+export default Hackpack;