diff --git a/.env.sample b/.env.sample new file mode 100644 index 0000000..75c3e2c --- /dev/null +++ b/.env.sample @@ -0,0 +1 @@ +VITE_TMDB_API_KEY=sample \ No newline at end of file diff --git a/README.md b/README.md index e1cdc89..966382d 100644 --- a/README.md +++ b/README.md @@ -17,14 +17,17 @@ If you are developing a production application, we recommend updating the config export default { // other rules... parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - project: ['./tsconfig.json', './tsconfig.node.json', './tsconfig.app.json'], + ecmaVersion: "latest", + sourceType: "module", + project: ["./tsconfig.json", "./tsconfig.node.json", "./tsconfig.app.json"], tsconfigRootDir: __dirname, }, -} +}; ``` - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` - Optionally add `plugin:@typescript-eslint/stylistic-type-checked` - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list + +https://github.com/creativetimofficial/material-tailwind/issues/528 +https://github.com/creativetimofficial/material-tailwind/issues/427 diff --git a/index.html b/index.html index 2ed99da..7afdf79 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Movieflix diff --git a/package-lock.json b/package-lock.json index fce9230..31fe6b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,6 @@ "@capacitor/app": "^6.0.0", "@capacitor/core": "^6.1.1", "@material-tailwind/react": "^2.1.9", - "@splidejs/react-splide": "^0.7.12", "@tanstack/react-query": "^5.51.11", "@tanstack/react-query-devtools": "^5.51.11", "@uidotdev/usehooks": "^2.4.1", @@ -22,7 +21,6 @@ "react-hook-form": "^7.52.1", "react-router-dom": "^6.25.1", "react-transition-group": "^4.4.5", - "slick-carousel": "^1.8.1", "xior": "^0.5.5" }, "devDependencies": { @@ -30,14 +28,13 @@ "@capacitor/cli": "^6.1.1", "@tailwindcss/typography": "^0.5.13", "@tanstack/eslint-plugin-query": "^5.51.12", - "@types/react": "^18.3.3", + "@types/react": "18.2.9", "@types/react-dom": "^18.3.0", "@types/react-transition-group": "^4.4.10", "@typescript-eslint/eslint-plugin": "^7.15.0", "@typescript-eslint/parser": "^7.15.0", "@vitejs/plugin-react": "^4.3.1", "autoprefixer": "^10.4.19", - "daisyui": "^4.12.10", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", @@ -1942,19 +1939,6 @@ "win32" ] }, - "node_modules/@splidejs/react-splide": { - "version": "0.7.12", - "resolved": "https://registry.npmjs.org/@splidejs/react-splide/-/react-splide-0.7.12.tgz", - "integrity": "sha512-UfXH+j47jsMc4x5HA/aOwuuHPqn6y9+ZTNYPWDRD8iLKvIVMZlzq2unjUEvyDAU+TTVPZOXkG2Ojeoz0P4AkZw==", - "dependencies": { - "@splidejs/splide": "^4.1.3" - } - }, - "node_modules/@splidejs/splide": { - "version": "4.1.4", - "resolved": "https://registry.npmjs.org/@splidejs/splide/-/splide-4.1.4.tgz", - "integrity": "sha512-5I30evTJcAJQXt6vJ26g2xEkG+l1nXcpEw4xpKh0/FWQ8ozmAeTbtniVtVmz2sH1Es3vgfC4SS8B2X4o5JMptA==" - }, "node_modules/@tailwindcss/typography": { "version": "0.5.13", "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz", @@ -2211,12 +2195,13 @@ "dev": true }, "node_modules/@types/react": { - "version": "18.3.3", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz", - "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==", + "version": "18.2.9", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.9.tgz", + "integrity": "sha512-pL3JAesUkF7PEQGxh5XOwdXGV907te6m1/Qe1ERJLgomojS6Ne790QiA7GUl434JEkFA2aAaB6qJ5z4e1zJn/w==", "dev": true, "dependencies": { "@types/prop-types": "*", + "@types/scheduler": "*", "csstype": "^3.0.2" } }, @@ -2238,6 +2223,12 @@ "@types/react": "*" } }, + "node_modules/@types/scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-YIoDCTH3Af6XM5VuwGG/QL/CJqga1Zm3NkU3HZ4ZHK2fRMPYP1VczsTUqtsf43PH/iJNVlPHAo2oWX7BSdB2Hw==", + "dev": true + }, "node_modules/@types/slice-ansi": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/slice-ansi/-/slice-ansi-4.0.0.tgz", @@ -3643,16 +3634,6 @@ "url": "https://github.com/sponsors/fb55" } }, - "node_modules/css-selector-tokenizer": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz", - "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==", - "dev": true, - "dependencies": { - "cssesc": "^3.0.0", - "fastparse": "^1.1.2" - } - }, "node_modules/css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", @@ -3682,34 +3663,6 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, - "node_modules/culori": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz", - "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==", - "dev": true, - "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" - } - }, - "node_modules/daisyui": { - "version": "4.12.10", - "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.10.tgz", - "integrity": "sha512-jp1RAuzbHhGdXmn957Z2XsTZStXGHzFfF0FgIOZj3Wv9sH7OZgLfXTRZNfKVYxltGUOBsG1kbWAdF5SrqjebvA==", - "dev": true, - "dependencies": { - "css-selector-tokenizer": "^0.8", - "culori": "^3", - "picocolors": "^1", - "postcss-js": "^4" - }, - "engines": { - "node": ">=16.9.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/daisyui" - } - }, "node_modules/dargs": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/dargs/-/dargs-7.0.0.tgz", @@ -4568,12 +4521,6 @@ "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", "dev": true }, - "node_modules/fastparse": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", - "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", - "dev": true - }, "node_modules/fastq": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", @@ -8720,14 +8667,6 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, - "node_modules/slick-carousel": { - "version": "1.8.1", - "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", - "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", - "peerDependencies": { - "jquery": ">=1.8.0" - } - }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", diff --git a/package.json b/package.json index 598d967..0381200 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "@capacitor/app": "^6.0.0", "@capacitor/core": "^6.1.1", "@material-tailwind/react": "^2.1.9", - "@splidejs/react-splide": "^0.7.12", "@tanstack/react-query": "^5.51.11", "@tanstack/react-query-devtools": "^5.51.11", "@uidotdev/usehooks": "^2.4.1", @@ -29,7 +28,6 @@ "react-hook-form": "^7.52.1", "react-router-dom": "^6.25.1", "react-transition-group": "^4.4.5", - "slick-carousel": "^1.8.1", "xior": "^0.5.5" }, "devDependencies": { @@ -37,14 +35,13 @@ "@capacitor/cli": "^6.1.1", "@tailwindcss/typography": "^0.5.13", "@tanstack/eslint-plugin-query": "^5.51.12", - "@types/react": "^18.3.3", + "@types/react": "18.2.9", "@types/react-dom": "^18.3.0", "@types/react-transition-group": "^4.4.10", "@typescript-eslint/eslint-plugin": "^7.15.0", "@typescript-eslint/parser": "^7.15.0", "@vitejs/plugin-react": "^4.3.1", "autoprefixer": "^10.4.19", - "daisyui": "^4.12.10", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", diff --git a/src/App.css b/src/App.css index 0c7262b..880dac4 100644 --- a/src/App.css +++ b/src/App.css @@ -7,13 +7,17 @@ /* border: 1px solid red !important; */ } +* :focus-visible { + outline: red solid 3px; +} + *::-webkit-scrollbar { display: none; /* Safari and Chrome hide scrollbar */ } html, body { - @apply h-full w-full overflow-hidden bg-base-100; + @apply bg-base-100; } .page { diff --git a/src/components/GettingStarted/BottomSheet.tsx b/src/components/GettingStarted/BottomSheet.tsx index 36e9c7f..65c6a9d 100644 --- a/src/components/GettingStarted/BottomSheet.tsx +++ b/src/components/GettingStarted/BottomSheet.tsx @@ -1,10 +1,6 @@ -import { Button } from "@material-tailwind/react"; -import { Options, Splide, SplideSlide } from "@splidejs/react-splide"; +import { Button, Carousel } from "@material-tailwind/react"; import { Link } from "react-router-dom"; -import "@splidejs/react-splide/css"; -import "@splidejs/react-splide/css/core"; - const title = ( <> Bring Free streaming to
@@ -16,15 +12,6 @@ const features = [ "Movieflix Original content production investment in creating high-quality series and movies trailer.", "Multiple Device Access Availabilty on smartphones,tablet,smart TVs etc.", ]; -const splideOptions: Options = { - perPage: 1, - arrows: false, - classes: { - pagination: "splide__pagination relative my-1", - }, - type: "loop", - autoplay: "pause", -}; export default function BottomSheet() { return ( @@ -32,23 +19,35 @@ export default function BottomSheet() {

{title}

- + <>} + nextArrow={() => <>} + className="h-auto" + navigation={({ setActiveIndex, activeIndex, length }) => ( +
+ {new Array(length).fill("").map((_, i) => ( + setActiveIndex(i)} + /> + ))} +
+ )} + > {features.map((feat, i) => ( - -

{feat}

- +

+ {feat} +

))} - + - +
diff --git a/src/components/Home/CardsList.tsx b/src/components/Home/CardsList.tsx new file mode 100644 index 0000000..b5936be --- /dev/null +++ b/src/components/Home/CardsList.tsx @@ -0,0 +1,57 @@ +import { IconButton } from "@material-tailwind/react"; +import { useCallback, useRef } from "react"; + +type Props = { + title: string; +}; + +export default function CardsList({ title }: Props) { + const scrollableRef = useRef(null); + const scrollBy = useCallback( + (to: "left" | "right") => { + scrollableRef.current?.scrollBy({ + left: to == "right" ? 250 : -250, + behavior: "smooth", + }); + }, + [scrollableRef], + ); + + return ( +
+

{title}

+ +
+ {[...Array(12)].map((_, i) => ( +
+ ))} +
+ +
+ scrollBy("left")} + > + + + scrollBy("right")} + > + + +
+
+ ); +} diff --git a/src/components/Home/GenresList.tsx b/src/components/Home/GenresList.tsx index fff8b71..cf3d3a4 100644 --- a/src/components/Home/GenresList.tsx +++ b/src/components/Home/GenresList.tsx @@ -1,3 +1,4 @@ +import { Button } from "@material-tailwind/react"; import { useState } from "react"; function GenresList() { @@ -17,15 +18,16 @@ function GenresList() { const [active, setActive] = useState(menu[0].id); return ( -
+
{menu.map(({ name, id }) => ( -

setActive(id)} + key={id} > {name} -

+ ))}
); diff --git a/src/components/Home/Header.tsx b/src/components/Home/Header.tsx index 6681df7..667677b 100644 --- a/src/components/Home/Header.tsx +++ b/src/components/Home/Header.tsx @@ -1,35 +1,56 @@ -import { Button } from "@material-tailwind/react"; +import { Carousel, IconButton } from "@material-tailwind/react"; +import HeaderCard from "./HeaderCard"; -export default function Header() { +function Header() { return ( -
-

Movieflix

-

- An app for movies/series. -

-

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita - blanditiis in tempora quos voluptatibus ipsam non obcaecati dicta - excepturi quisquam, dolores, vitae unde quis optio, itaque ad - consequatur soluta natus. -

-
- - -
-
+
+ ( + + + + )} + nextArrow={({ handleNext }) => ( + + + + )} + navigation={({ setActiveIndex, activeIndex, length }) => ( +
+ {new Array(length).fill("").map((_, i) => ( + setActiveIndex(i)} + /> + ))} +
+ )} + > + {[...Array(6)].map((_, i) => ( + + ))} + +
); } + +export default Header; diff --git a/src/components/Home/HeaderCard.tsx b/src/components/Home/HeaderCard.tsx new file mode 100644 index 0000000..17a258f --- /dev/null +++ b/src/components/Home/HeaderCard.tsx @@ -0,0 +1,29 @@ +import { Button, Card, CardBody } from "@material-tailwind/react"; + +export default function HeaderCard() { + return ( + + + +

+ The place is close to Barceloneta Beach and bus stop just 2 min by + walk and near to "Naviglio" where you can enjoy the main + night life in Barcelona. +

+ + + +
+ + ); +} diff --git a/src/layout/BottomNavBar.tsx b/src/layout/BottomNavBar.tsx index dd50e4f..843aef9 100644 --- a/src/layout/BottomNavBar.tsx +++ b/src/layout/BottomNavBar.tsx @@ -28,7 +28,7 @@ export default function BottomNavBar() { const location = useLocation(); return ( -
+
{navs.map(({ icon, label, href }, i) => { const isActive = location.pathname == href; @@ -39,9 +39,6 @@ export default function BottomNavBar() { className={`flex items-center justify-between rounded-full duration-300 ${isActive ? "" : "bg-transparent text-white"}`} variant={isActive ? "filled" : "text"} size="sm" - placeholder={undefined} - onPointerEnterCapture={undefined} - onPointerLeaveCapture={undefined} > diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx index 71f8b67..358aa41 100644 --- a/src/layout/Layout.tsx +++ b/src/layout/Layout.tsx @@ -16,7 +16,7 @@ export default function Layout() {
diff --git a/src/main.tsx b/src/main.tsx index 35e6a3b..eb56835 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,7 +2,7 @@ import React from "react"; import { createRoot } from "react-dom/client"; import { ButtonStyleTypes, ThemeProvider } from "@material-tailwind/react"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; +// import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { BrowserRouter } from "react-router-dom"; import App from "./App.tsx"; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index b491e50..7886510 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,9 +1,16 @@ +import Header from "../components/Home/Header"; +import CardsList from "../components/Home/CardsList"; import GenresList from "../components/Home/GenresList"; export default function Home() { return ( -
+
+
+ + + +
); } diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 3aa4745..c8f3ce1 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -18,7 +18,7 @@ export default function Login() { return (
@@ -38,9 +38,6 @@ export default function Login() { icon={} {...register("username", { required: true })} error={Boolean(errors.username)} - onPointerEnterCapture={undefined} - onPointerLeaveCapture={undefined} - crossOrigin={undefined} /> } {...register("password", { required: true })} error={Boolean(errors.password)} - onPointerEnterCapture={undefined} - onPointerLeaveCapture={undefined} - crossOrigin={undefined} />
@@ -65,14 +59,7 @@ export default function Login() { to login here.
- +
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx index fc1b430..795e559 100644 --- a/src/pages/NotFound.tsx +++ b/src/pages/NotFound.tsx @@ -18,12 +18,7 @@ function NotFound() {

- diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index c00a44a..9557f4d 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -19,7 +19,7 @@ function Profile() {
-
+
diff --git a/src/utils/utils.ts b/src/utils/utils.ts index dc75661..67d0550 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -1,6 +1,6 @@ // https://stackoverflow.com/a/46545530/14781260 -export function shuffleArray(unshuffled: any[]) { - let shuffled = unshuffled +export function shuffleArray(unshuffled: unknown[]) { + const shuffled = unshuffled .map((value) => ({ value, sort: Math.random() })) .sort((a, b) => a.sort - b.sort) .map(({ value }) => value); diff --git a/tailwind.config.js b/tailwind.config.js index 5ece5a7..5516048 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,6 +6,16 @@ export default withMT({ content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], plugins: [require("@tailwindcss/typography")], theme: { + borderWidth: { + DEFAULT: "1px", + 0: "0", + 1: "1px", + 2: "2px", + 3: "3px", + 4: "4px", + 6: "6px", + 8: "8px", + }, colors: { ...colors, primary: "red", @@ -22,6 +32,9 @@ export default withMT({ sans: ["Ubuntu", "sans-serif"], }, extend: { + aspectRatio: { + "3/4": "3 / 4", + }, // https://jackwhiting.co.uk/posts/creating-a-marquee-with-tailwind/ animation: { marquee: "marquee 36s linear infinite", @@ -39,11 +52,7 @@ export default withMT({ }, container: { padding: { - DEFAULT: "1rem", - sm: "2rem", - lg: "4rem", - xl: "5rem", - "2xl": "6rem", + DEFAULT: "0", }, }, },