component ofr the financial slider

GenerateNU · Nov 16, 2023 · b2b21cb · b2b21cb
1 parent f0605da
commit b2b21cb
Show file tree

Hide file tree

Showing 7 changed files with 248 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "i": "^0.3.7",
     "isemail": "^3.2.0",
     "jsonwebtoken": "^9.0.2",
+    "keen-slider": "^6.8.6",
     "next": "13.4.19",
     "next-auth": "^4.23.1",
     "postcss": "8.4.28",

diff --git a/prisma/migrations/20231102233004_init/migration.sql b/prisma/migrations/20231102233004_init/migration.sql
@@ -0,0 +1,16 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `passed` on the `ModuleExam` table. All the data in the column will be lost.
+  - You are about to drop the column `score` on the `ModuleExam` table. All the data in the column will be lost.
+  - You are about to drop the column `passed` on the `SubModuleQuiz` table. All the data in the column will be lost.
+  - You are about to drop the column `score` on the `SubModuleQuiz` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "ModuleExam" DROP COLUMN "passed",
+DROP COLUMN "score";
+
+-- AlterTable
+ALTER TABLE "SubModuleQuiz" DROP COLUMN "passed",
+DROP COLUMN "score";
diff --git a/src/components/FinancialLiteracyComponent.tsx b/src/components/FinancialLiteracyComponent.tsx
@@ -1,4 +1,7 @@
 import * as React from "react";
+import { useKeenSlider } from "keen-slider/react";
+import "keen-slider/keen-slider.min.css";
+import Wheel from "./MessageCarousel";
 
 export function LearningComponent(props: any) {
   return (
@@ -245,7 +248,8 @@ function FinancialLiteracyComponent(props: any) {
         </h2>
         <div className="flex w-full max-w-[1399px] flex-col items-stretch mt-36 max-md:max-w-full max-md:mt-10">
           <div className="pr-0.5 max-md:max-w-full">
-            <div className="gap-5 flex max-md:flex-col max-md:items-stretch max-md:gap-0">
+            <Wheel />
+            {/*<div className="gap-5 flex max-md:flex-col max-md:items-stretch max-md:gap-0">
               <div className="flex flex-col items-stretch w-3/5 max-md:w-full max-md:ml-0">
                 <div className="shadow-sm bg-white flex grow flex-col w-full mx-auto pl-11 pr-14 pt-10 pb-24 max-md:max-w-full max-md:mt-10 max-md:px-5">
                   <div className="flex w-[203px] max-w-full items-stretch justify-between gap-5">
@@ -280,7 +284,7 @@ function FinancialLiteracyComponent(props: any) {
                   </div>
                 </div>
               </div>
-            </div>
+            </div>*/}
           </div>
         </div>
       </section>

diff --git a/src/components/MessageCarousel.tsx b/src/components/MessageCarousel.tsx
@@ -0,0 +1,211 @@
+import React, { useState } from "react";
+import { useKeenSlider, KeenSliderPlugin } from "keen-slider/react";
+import "keen-slider/keen-slider.min.css";
+import graycircle from "./circle_gray.png";
+import Image from "next/image";
+
+const WheelControls: KeenSliderPlugin = (slider) => {
+  let touchTimeout: ReturnType<typeof setTimeout>;
+  let position: {
+    x: number;
+    y: number;
+  };
+  let wheelActive: boolean;
+
+  function dispatch(e: WheelEvent, name: string) {
+    position.x -= e.deltaX;
+    position.y -= e.deltaY;
+    slider.container.dispatchEvent(
+      new CustomEvent(name, {
+        detail: {
+          x: position.x,
+          y: position.y,
+        },
+      })
+    );
+  }
+
+  function wheelStart(e: WheelEvent) {
+    position = {
+      x: e.pageX,
+      y: e.pageY,
+    };
+    dispatch(e, "ksDragStart");
+  }
+
+  function wheel(e: WheelEvent) {
+    dispatch(e, "ksDrag");
+  }
+
+  function wheelEnd(e: WheelEvent) {
+    dispatch(e, "ksDragEnd");
+  }
+
+  function eventWheel(e: WheelEvent) {
+    e.preventDefault();
+    if (!wheelActive) {
+      wheelStart(e);
+      wheelActive = true;
+    }
+    wheel(e);
+    clearTimeout(touchTimeout);
+    touchTimeout = setTimeout(() => {
+      wheelActive = false;
+      wheelEnd(e);
+    }, 50);
+  }
+
+  slider.on("created", () => {
+    slider.container.addEventListener("wheel", eventWheel, {
+      passive: false,
+    });
+  });
+};
+
+function Wheel() {
+  const [sliderRef] = useKeenSlider<HTMLDivElement>(
+    {
+      loop: false,
+      rubberband: false,
+      vertical: false,
+      slides: {
+        origin: "center",
+        perView: 2,
+        spacing: 15,
+      },
+    },
+    [WheelControls]
+  );
+
+  return (
+    <div ref={sliderRef} className="keen-slider" style={{ height: 200 }}>
+      <div className="keen-slider__slide number-slide1">
+        <div className="flex flex-col items-stretch w-4/5 max-md:w-full max-md:ml-0">
+          <div className="shadow-sm bg-white flex grow flex-col w-full mx-auto pl-11 pr-14 pt-4 pb-14 max-md:max-w-full max-md:mt-10 max-md:px-5">
+            <div className="flex w-[203px] max-w-full items-stretch justify-between gap-5"></div>
+            <Image
+              src={graycircle}
+              alt="graycircle"
+              width={100}
+              height={100}
+              className="absolute top-0 left-0"
+            />
+            <div className="text-black text-xl font-semibold leading-8 w-[564px] max-w-full mt-2 self-end pl-24">
+              "Super easy and clear! I can not recommend it enough Super easy
+              and clear! I can not recommend it enough."
+            </div>
+            <p className="text-black text-xl font-semibold leading-8 w-[564px] text-right pr-32">
+              -Aisha
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="keen-slider__slide number-slide2">
+        <div className="flex flex-col items-stretch w-4/5 max-md:w-full max-md:ml-0">
+          <div className="shadow-sm bg-white flex grow flex-col w-full mx-auto pl-11 pr-14 pt-4 pb-14 max-md:max-w-full max-md:mt-10 max-md:px-5">
+            <div className="flex w-[203px] max-w-full items-stretch justify-between gap-5"></div>
+            <Image
+              src={graycircle}
+              alt="graycircle"
+              width={100}
+              height={100}
+              className="absolute top-0 left-0"
+            />
+            <div className="text-black text-xl font-semibold leading-8 w-[564px] max-w-full mt-2 self-end pl-24">
+              "Super easy and clear! I can not recommend it enough Super easy
+              and clear! I can not recommend it enough."
+            </div>
+            <p className="text-black text-xl font-semibold leading-8 w-[564px] text-right pr-32">
+              -Aisha
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="keen-slider__slide number-slide3">
+        <div className="flex flex-col items-stretch w-4/5 max-md:w-full max-md:ml-0">
+          <div className="shadow-sm bg-white flex grow flex-col w-full mx-auto pl-11 pr-14 pt-4 pb-14 max-md:max-w-full max-md:mt-10 max-md:px-5">
+            <div className="flex w-[203px] max-w-full items-stretch justify-between gap-5"></div>
+            <Image
+              src={graycircle}
+              alt="graycircle"
+              width={100}
+              height={100}
+              className="absolute top-0 left-0"
+            />
+            <div className="text-black text-xl font-semibold leading-8 w-[564px] max-w-full mt-2 self-end pl-24">
+              "Super easy and clear! I can not recommend it enough Super easy
+              and clear! I can not recommend it enough."
+            </div>
+            <p className="text-black text-xl font-semibold leading-8 w-[564px] text-right pr-32">
+              -Aisha
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="keen-slider__slide number-slide4">
+        <div className="flex flex-col items-stretch w-4/5 max-md:w-full max-md:ml-0">
+          <div className="shadow-sm bg-white flex grow flex-col w-full mx-auto pl-11 pr-14 pt-4 pb-14 max-md:max-w-full max-md:mt-10 max-md:px-5">
+            <div className="flex w-[203px] max-w-full items-stretch justify-between gap-5"></div>
+            <Image
+              src={graycircle}
+              alt="graycircle"
+              width={100}
+              height={100}
+              className="absolute top-0 left-0"
+            />
+            <div className="text-black text-xl font-semibold leading-8 w-[564px] max-w-full mt-2 self-end pl-24">
+              "Super easy and clear! I can not recommend it enough Super easy
+              and clear! I can not recommend it enough."
+            </div>
+            <p className="text-black text-xl font-semibold leading-8 w-[564px] text-right pr-32">
+              -Aisha
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="keen-slider__slide number-slide5">
+        <div className="flex flex-col items-stretch w-4/5 max-md:w-full max-md:ml-0">
+          <div className="shadow-sm bg-white flex grow flex-col w-full mx-auto pl-11 pr-14 pt-4 pb-14 max-md:max-w-full max-md:mt-10 max-md:px-5">
+            <div className="flex w-[203px] max-w-full items-stretch justify-between gap-5"></div>
+            <Image
+              src={graycircle}
+              alt="graycircle"
+              width={100}
+              height={100}
+              className="absolute top-0 left-0"
+            />
+            <div className="text-black text-xl font-semibold leading-8 w-[564px] max-w-full mt-2 self-end pl-24">
+              "Super easy and clear! I can not recommend it enough Super easy
+              and clear! I can not recommend it enough."
+            </div>
+            <p className="text-black text-xl font-semibold leading-8 w-[564px] text-right pr-32">
+              -Aisha
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="keen-slider__slide number-slide6">
+        <div className="flex flex-col items-stretch w-4/5 max-md:w-full max-md:ml-0">
+          <div className="shadow-sm bg-white flex grow flex-col w-full mx-auto pl-11 pr-14 pt-4 pb-14 max-md:max-w-full max-md:mt-10 max-md:px-5">
+            <div className="flex w-[203px] max-w-full items-stretch justify-between gap-5"></div>
+            <Image
+              src={graycircle}
+              alt="graycircle"
+              width={100}
+              height={100}
+              className="absolute top-0 left-0"
+            />
+            <div className="text-black text-xl font-semibold leading-8 w-[564px] max-w-full mt-2 self-end pl-24">
+              "Super easy and clear! I can not recommend it enough Super easy
+              and clear! I can not recommend it enough."
+            </div>
+            <p className="text-black text-xl font-semibold leading-8 w-[564px] text-right pr-32">
+              -Aisha
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default Wheel;
diff --git a/src/components/circle_gray.png b/src/components/circle_gray.png
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
@@ -1,3 +1,4 @@
+import FinancialLiteracyComponent from "@/components/FinancialLiteracyComponent";
 export default function SignInPage(): JSX.Element {
-    return (<>dashboard here</>)
-}
+  return <FinancialLiteracyComponent />;
+}