diff --git a/package.json b/package.json index 20e6f38..8066004 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "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", @@ -10,7 +11,11 @@ "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" } } diff --git a/src/App.css b/src/App.css index 4ba232d..280e052 100644 --- a/src/App.css +++ b/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%; + } +} diff --git a/src/App.js b/src/App.tsx similarity index 59% rename from src/App.js rename to src/App.tsx index f72222b..fbac914 100644 --- a/src/App.js +++ b/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 (
-
-
-
- -
- parlour -
-
-
- {selectedServices.size > 0 && ( - - )} - - -
+
); } diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.tsx similarity index 98% rename from src/components/DatePicker/index.js rename to src/components/DatePicker/index.tsx index 6ed8337..6194a0e 100644 --- a/src/components/DatePicker/index.js +++ b/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"; diff --git a/src/components/DateSelected/index.js b/src/components/DateSelected/index.tsx similarity index 96% rename from src/components/DateSelected/index.js rename to src/components/DateSelected/index.tsx index 682a767..0410165 100644 --- a/src/components/DateSelected/index.js +++ b/src/components/DateSelected/index.tsx @@ -1,3 +1,4 @@ +// @ts-ignore import dayjs from "dayjs"; import React from "react"; import "./DateSelected.css"; diff --git a/src/components/Header/index.js b/src/components/Header/index.tsx similarity index 100% rename from src/components/Header/index.js rename to src/components/Header/index.tsx diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css index 7ccbfed..f511f09 100644 --- a/src/components/NavBar/NavBar.css +++ b/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; } diff --git a/src/components/NavBar/index.js b/src/components/NavBar/index.tsx similarity index 68% rename from src/components/NavBar/index.js rename to src/components/NavBar/index.tsx index 5cc7141..a361b88 100644 --- a/src/components/NavBar/index.js +++ b/src/components/NavBar/index.tsx @@ -5,8 +5,9 @@ function NavBar() { return ( ); diff --git a/src/components/ServiceCard/index.js b/src/components/ServiceCard/index.tsx similarity index 61% rename from src/components/ServiceCard/index.js rename to src/components/ServiceCard/index.tsx index 827df1f..7d23f50 100644 --- a/src/components/ServiceCard/index.js +++ b/src/components/ServiceCard/index.tsx @@ -1,13 +1,17 @@ -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(); const onSelectedHandler = (ser) => { onSelect(ser, !selected); setSelected((sel) => !sel); }; + useEffect(() => { + console.log("service.imgSrc: ", service.imgSrc); + }, []); + return (
{selected &&
✔
}
- +
{service.title}
diff --git a/src/components/Services/index.js b/src/components/Services/index.tsx similarity index 100% rename from src/components/Services/index.js rename to src/components/Services/index.tsx diff --git a/src/components/SlotPicker/index.js b/src/components/SlotPicker/index.tsx similarity index 85% rename from src/components/SlotPicker/index.js rename to src/components/SlotPicker/index.tsx index 861c58e..e57e546 100644 --- a/src/components/SlotPicker/index.js +++ b/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()} >

x

{slotSelected === slot?.id && ✔} diff --git a/src/components/Slots/index.js b/src/components/Slots/index.tsx similarity index 80% rename from src/components/Slots/index.js rename to src/components/Slots/index.tsx index a254abf..b4886af 100644 --- a/src/components/Slots/index.js +++ b/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 (
))} {slotSelected && } -
+ {/*
*/}
); } diff --git a/src/constants/services.js b/src/constants/services.ts similarity index 96% rename from src/constants/services.js rename to src/constants/services.ts index 9ec3632..e0af22b 100644 --- a/src/constants/services.js +++ b/src/constants/services.ts @@ -1,3 +1,4 @@ +// const HaircutImg = "haircut1.jpg"; import HaircutImg from "../assets/haircut1.jpg"; import facialImg from "../assets/facial.jpg"; diff --git a/src/index.js b/src/index.tsx similarity index 100% rename from src/index.js rename to src/index.tsx diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx new file mode 100644 index 0000000..af76169 --- /dev/null +++ b/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 ( +
+
+
+ +
+ parlour +
+
+
+
+
+ {selectedServices.size > 0 && ( + + )} + + +
+ ); +} + +export default Home; diff --git a/src/utils/index.js b/src/utils/index.js new file mode 100644 index 0000000..e69de29 diff --git a/src/utils/users.js b/src/utils/users.js new file mode 100644 index 0000000..cc63a5f --- /dev/null +++ b/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; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..3a95655 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "commonjs", + "jsx": "react", + "outDir": "./dist", + "strict": true, + "esModuleInterop": true, + "--downlevelIteration": true + }, + "include": ["./src/**/*"] +} diff --git a/types/index.d.ts b/types/index.d.ts new file mode 100644 index 0000000..891c762 --- /dev/null +++ b/types/index.d.ts @@ -0,0 +1,2 @@ +declare module "*.jpg"; +declare module "*.png";