typescript add

package.json

@@ -3,14 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@radix-ui/themes": "^2.0.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "dayjs": "^1.11.10",
     "react": "^18.2.0",
     "react-datetime-picker": "^5.5.2",
     "react-dom": "^18.2.0",
+    "react-router": "^6.16.0",
+    "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
+    "tsc": "^2.0.4",
+    "typescript": "^5.2.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -36,5 +41,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.10",
+    "file-loader": "^6.2.0"
   }
 }

src/App.css

@@ -20,12 +20,30 @@
   max-height: 450px;
   margin-bottom: 50px;
   z-index: 5;
+
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+
+  max-height: 500px;
+  max-width: 500px;
+
+  border-radius: 50%;
+  overflow: hidden;
+
+  transform: translateX(-50px);
 }
 
 .parlour-img-holder img {
   /* width: 75%; */
-  max-height: 100%;
-  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  /* max-height: 100%; */
+  height: 500px;
+  width: 500px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.parlour-img-holder img:hover {
+  transition: transform 0.6s;
+  transform: scale(1.5);
 }
 
 .skew-bg1 {
@@ -35,7 +53,7 @@
   position: absolute;
   top: -100px;
   right: -300px;
-  transform: skew(20deg) rotate(-45deg);
+  transform: skew(20deg) rotate(-40deg);
   z-index: 0;
   background: rgb(56, 179, 236);
   background: linear-gradient(
@@ -62,3 +80,29 @@
   transform: skew(20deg) rotate(45deg);
   z-index: 0;
 }
+
+.skew-bg1-square {
+  width: 50px;
+  height: 50px;
+  background-color: burlywood;
+  animation: sqew-sq1 5s linear infinite;
+  position: relative;
+  right: -100%;
+}
+
+@keyframes sqew-sq1 {
+  0% {
+    transform: rotate(0deg);
+    opacity: 100%;
+  }
+
+  50% {
+    transform: rotate(180deg);
+    opacity: 80%;
+  }
+
+  100% {
+    transform: rotate(360deg);
+    opacity: 100%;
+  }
+}

src/App.js → src/App.tsx

@@ -1,18 +1,12 @@
-import Services from "./components/Services";
+import React from "react";
 import "./App.css";
-import HaircutImg from "./assets/haircut1.jpg";
-
-import facialImg from "./assets/facial.jpg";
-import parlourImg from "./assets/parlour.jpg";
 import servicesList from "./constants/services";
 
 // import HaircutImg from "./assets/haircut1.jpg";
 import { useEffect, useState } from "react";
-import DatePicker from "./components/DatePicker";
-import DateSelected from "./components/DateSelected";
-import Slots from "./components/Slots";
 import dayjs from "dayjs";
 import Header from "./components/Header";
+import Home from "./pages/Home";
 
 function App() {
   const [services, setServices] = useState({});
@@ -45,15 +39,10 @@ function App() {
     });
   }, []);
 
-  const selectedServicesHandler = (service, isSelected) => {
-    setSelectedServices(
-      (prevSel) => {
-        return new Set([...prevSel, service]);
-      },
-      () => {
-        console.log({ selectedServices });
-      }
-    );
+  const selectedServicesHandler = (service: any, isSelected: boolean) => {
+    setSelectedServices((prevSel) => {
+      return new Set([...prevSel, service]);
+    });
   };
 
   const setDateHandler = (value) => {
@@ -85,21 +74,16 @@ function App() {
   return (
     <div className="App">
       <Header />
-      <div>
-        <div className="parlour-and-services">
-          <div className="skew-bg2"></div>
-          <Services services={services} onSelect={selectedServicesHandler} />
-          <div className="parlour-img-holder">
-            <img src={parlourImg} alt="parlour" />
-          </div>
-          <div className="skew-bg1"></div>
-        </div>
-        {selectedServices.size > 0 && (
-          <DatePicker setDateHandler={setDateHandler} />
-        )}
-        <DateSelected date={date} />
-        <Slots slots={slots} setSlot={setSlotHandler} slotSelected={slot?.id} />
-      </div>
+      <Home
+        setDateHandler={setDateHandler}
+        setSlotHandler={setSlotHandler}
+        selectedServicesHandler={selectedServicesHandler}
+        date={date}
+        slots={slots}
+        slot={slot}
+        services={services}
+        selectedServices={selectedServices}
+      />
     </div>
   );
 }

src/components/DatePicker/index.js → src/components/DatePicker/index.tsx

@@ -1,3 +1,4 @@
+// @ts-ignore
 import React, { useState } from "react";
 import DateTimePicker from "react-datetime-picker";
 import "./DatePicker.css";

src/components/DateSelected/index.js → src/components/DateSelected/index.tsx

@@ -1,3 +1,4 @@
+// @ts-ignore
 import dayjs from "dayjs";
 import React from "react";
 import "./DateSelected.css";

src/components/NavBar/NavBar.css

@@ -11,7 +11,17 @@
 .nav-bar--container ul li {
   margin: 0 5px;
   padding: 10px 15px;
-  border: 1px solid #9f86c0;
+  border: 2px solid #9f86c0;
   border-radius: 50px;
-  min-width: 100px;
+  /* min-width: 100px; */
+  width: 150px;
+  cursor: pointer;
+  box-sizing: border-box;
+  font-size: 16px;
+  transition: background-color 0.6s;
+}
+
+.nav-bar--container ul li:hover {
+  background-color: #9f86c0;
+  color: white;
 }

src/components/NavBar/index.js → src/components/NavBar/index.tsx

@@ -5,8 +5,9 @@ function NavBar() {
   return (
     <nav className="nav-bar--container">
       <ul>
-        <li>Home</li>
-        <li>Dashboard</li>
+        <li>🏠 Home</li>
+        <li>⚙️ Dashboard</li>
+        <li>🛒 Cart</li>
       </ul>
     </nav>
   );

src/components/ServiceCard/index.js → src/components/ServiceCard/index.tsx

@@ -1,21 +1,25 @@
-import React, { useState } from "react";
+import React, { ReactElement, useEffect, useState } from "react";
 import "./ServiceCard.css";
 
-function ServiceCard({ onSelect, service }) {
-  const [selected, setSelected] = useState();
+function ServiceCard({ onSelect, service }): ReactElement {
+  const [selected, setSelected] = useState<boolean | undefined>();
   const onSelectedHandler = (ser) => {
     onSelect(ser, !selected);
     setSelected((sel) => !sel);
   };
 
+  useEffect(() => {
+    console.log("service.imgSrc: ", service.imgSrc);
+  }, []);
+
   return (
     <div
       className={`service-card--container ${selected ? "selected" : ""}`}
       onClick={() => onSelectedHandler(service)}
     >
       {selected && <div className="tick">✔</div>}
       <div className="service-card--img-holder">
-        <img src={service.imgSrc} />
+        <img src={`${service.imgSrc}`} />
       </div>
       <div className="service-card--title">{service.title}</div>
     </div>

src/components/SlotPicker/index.js → src/components/SlotPicker/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import "./SlotPicker.css";
 
-function SlotPicker({ slot, setSlot = () => {}, slotSelected }) {
+function SlotPicker({ slot, setSlot, slotSelected }) {
   //   const [selected, isSelected] = useState(false);
   const setSlotHandler = () => {
     // isSelected(true);
@@ -14,7 +14,7 @@ function SlotPicker({ slot, setSlot = () => {}, slotSelected }) {
       }
       ${slot.isAvailable ? "" : "not-available"}
       `}
-      onClick={() => setSlotHandler(slot)}
+      onClick={() => setSlotHandler()}
     >
       <p className="not-allowed-tick">x</p>
       {slotSelected === slot?.id && <span className="slot-tick">✔</span>}

src/components/Slots/index.js → src/components/Slots/index.tsx

@@ -4,9 +4,9 @@ import "./Slots.css";
 
 function Slots({ slots, setSlot, slotSelected }) {
   const slotsRef = React.createRef();
-  useEffect(() => {
-    slotsRef?.current?.scrollIntoView({ behavior: "smooth" });
-  }, []);
+  // useEffect(() => {
+  //   slotsRef?.current?.scrollIntoView({ behavior: "smooth" });
+  // }, []);
   return (
     <div
       className="slots--container"
@@ -19,7 +19,7 @@ function Slots({ slots, setSlot, slotSelected }) {
         <SlotPicker slot={slot} setSlot={setSlot} slotSelected={slotSelected} />
       ))}
       {slotSelected && <button>SUBMIT</button>}
-      <div ref={slotsRef} />
+      {/* <div ref={slotsRef} /> */}
     </div>
   );
 }

src/constants/services.js → src/constants/services.ts

@@ -1,3 +1,4 @@
+// const HaircutImg = "haircut1.jpg";
 import HaircutImg from "../assets/haircut1.jpg";
 import facialImg from "../assets/facial.jpg";
 

src/pages/Home/index.tsx

@@ -0,0 +1,50 @@
+import React, { ReactElement } from "react";
+import DatePicker from "../../components/DatePicker";
+import DateSelected from "../../components/DateSelected";
+import Services from "../../components/Services";
+import Slots from "../../components/Slots";
+import parlourImg from "../../assets/parlour.jpg";
+
+type homeTypes = {
+  services: any;
+  selectedServicesHandler: Function;
+  setDateHandler: Function;
+  setSlotHandler: Function;
+  slots: any[];
+  selectedServices: any;
+  date: any;
+  slot: any;
+};
+
+function Home({
+  services,
+  selectedServicesHandler,
+  setDateHandler,
+  setSlotHandler,
+  slots,
+  selectedServices,
+  date,
+  slot,
+}: homeTypes): ReactElement {
+  return (
+    <div>
+      <div className="parlour-and-services">
+        <div className="skew-bg2"></div>
+        <Services services={services} onSelect={selectedServicesHandler} />
+        <div className="parlour-img-holder">
+          <img src={parlourImg} alt="parlour" />
+        </div>
+        <div className="skew-bg1">
+          <div className="skew-bg1-square"></div>
+        </div>
+      </div>
+      {selectedServices.size > 0 && (
+        <DatePicker setDateHandler={setDateHandler} />
+      )}
+      <DateSelected date={date} />
+      <Slots slots={slots} setSlot={setSlotHandler} slotSelected={slot?.id} />
+    </div>
+  );
+}
+
+export default Home;

src/utils/users.js

@@ -0,0 +1,32 @@
+const users = [
+  {
+    id: "001",
+    name: "debashis",
+    role: "admin",
+    phoneNumber: "9876543210",
+    password: "deba1996",
+  },
+  {
+    id: "002",
+    name: "raman",
+    role: "client",
+    phoneNumber: "9876543211",
+    password: "ram123",
+  },
+  {
+    id: "003",
+    name: "ronald",
+    role: "client",
+    phoneNumber: "9876543212",
+    password: "ronxyz",
+  },
+  {
+    id: "004",
+    name: "ravi",
+    role: "client",
+    phoneNumber: "9876543213",
+    password: "r12345",
+  },
+];
+
+export default users;

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "jsx": "react",
+    "outDir": "./dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "--downlevelIteration": true
+  },
+  "include": ["./src/**/*"]
+}

types/index.d.ts

@@ -0,0 +1,2 @@
+declare module "*.jpg";
+declare module "*.png";