From ede7c041d9d3cdc32747844eadb7d25d3734cc10 Mon Sep 17 00:00:00 2001 From: hai0z Date: Thu, 7 Dec 2023 16:51:22 +0700 Subject: [PATCH] update daisy ui 4.4 --- .expo/README.md | 15 ++++++++ .expo/settings.json | 8 ++++ abc.ts | 13 +++++++ app/components/MovieCard.tsx | 12 +++++- app/components/ShadowImg.tsx | 2 +- app/globals.css | 6 +-- app/layout.tsx | 5 +-- app/movie/[movieId]/layout.tsx | 2 - app/movie/[movieId]/page.tsx | 5 +-- app/setting/page.tsx | 16 ++++++++ context/AppProvider.tsx | 2 +- hooks/useWindowDemensions.tsx | 1 - package-lock.json | 69 ++++++++++++++++++++-------------- package.json | 4 +- tailwind.config.js | 1 + 15 files changed, 115 insertions(+), 46 deletions(-) create mode 100644 .expo/README.md create mode 100644 .expo/settings.json create mode 100644 abc.ts diff --git a/.expo/README.md b/.expo/README.md new file mode 100644 index 0000000..fd146b4 --- /dev/null +++ b/.expo/README.md @@ -0,0 +1,15 @@ +> Why do I have a folder named ".expo" in my project? + +The ".expo" folder is created when an Expo project is started using "expo start" command. + +> What do the files contain? + +- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds. +- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator. +- "settings.json": contains the server configuration that is used to serve the application manifest. + +> Should I commit the ".expo" folder? + +No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine. + +Upon project creation, the ".expo" folder is already added to your ".gitignore" file. diff --git a/.expo/settings.json b/.expo/settings.json new file mode 100644 index 0000000..92bc513 --- /dev/null +++ b/.expo/settings.json @@ -0,0 +1,8 @@ +{ + "hostType": "lan", + "lanType": "ip", + "dev": true, + "minify": false, + "urlRandomness": null, + "https": false +} diff --git a/abc.ts b/abc.ts new file mode 100644 index 0000000..ec4ef9b --- /dev/null +++ b/abc.ts @@ -0,0 +1,13 @@ +interface IPeople { + name: string; + age: number; + info: T; +} + +type getPeopleInfo = { + [P in keyof IPeople as `get${Capitalize

}`]: () => IPeople[P]; +}; + +const hehe: Partial> = { + getAge: () => 10, +}; diff --git a/app/components/MovieCard.tsx b/app/components/MovieCard.tsx index 01ff707..41fb97a 100644 --- a/app/components/MovieCard.tsx +++ b/app/components/MovieCard.tsx @@ -5,7 +5,7 @@ import Link from "next/link"; import { Movie } from "@/service/TMDB.type"; import tmdb from "@/service/TMDB"; import { motion } from "framer-motion"; -function MovieCard2({ m, index }: { m: Movie; index: number }) { +function MovieCard2({ m }: { m: Movie; index: number }) { return ( @@ -54,7 +56,7 @@ function MovieCard2({ m, index }: { m: Movie; index: number }) { ); } -function MovieCard3({ m, index }: { m: Movie; index: number }) { +function MovieCard3({ m }: { m: Movie; index: number }) { return ( @@ -126,6 +130,8 @@ function MovieCard1({ m }: { m: Movie }) { width={500} height={500} alt="cast" + placeholder="blur" + blurDataURL={tmdb.getImage(m.poster_path, "w500")} loading="lazy" className="object-cover transition-all duration-300 md:w-56 group-hover:scale-110 lg:w-64 " /> @@ -155,6 +161,8 @@ function MovieCard({ m }: { m: Movie }) { width={500} height={500} alt="cast" + placeholder="blur" + blurDataURL={tmdb.getImage(m.poster_path, "w500")} loading="lazy" className="object-cover transition-all duration-300 w-60 group-hover:scale-110 lg:w-64 " /> diff --git a/app/components/ShadowImg.tsx b/app/components/ShadowImg.tsx index c2b1b3c..6dc4461 100644 --- a/app/components/ShadowImg.tsx +++ b/app/components/ShadowImg.tsx @@ -3,7 +3,7 @@ import React from "react"; function ShadowImg() { return (

-
+
); } diff --git a/app/globals.css b/app/globals.css index e1cd7f8..78d2426 100644 --- a/app/globals.css +++ b/app/globals.css @@ -4,7 +4,7 @@ @layer components { .text-gradient { - @apply [&::selection]:text-base-content relative col-start-1 row-start-1 bg-[linear-gradient(90deg,hsl(var(--s))_0%,hsl(var(--sf))_9%,hsl(var(--pf))_42%,hsl(var(--p))_47%,hsl(var(--a))_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [&::selection]:bg-blue-700/20 [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,hsl(var(--s))_4%,color-mix(in_oklch,hsl(var(--sf)),hsl(var(--pf)))_22%,hsl(var(--p))_45%,color-mix(in_oklch,hsl(var(--p)),hsl(var(--a)))_67%,hsl(var(--a))_100.2%)]; + @apply [&::selection]:text-base-content relative col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [&::selection]:bg-blue-700/20 [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]; } } @@ -14,7 +14,7 @@ background-image: linear-gradient( 180deg, rgba(24, 133, 69, 0) 20.77%, - hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity)) 100% + oklch(var(--b3, var(--b2)) / var(--tw-bg-opacity)) 100% ); top: 0; left: 80px; @@ -28,7 +28,7 @@ background-image: linear-gradient( 180deg, rgba(24, 133, 69, 0) 30.77%, - hsl(var(--b1) / var(--tw-bg-opacity)) 100% + oklch(var(--b1) / var(--tw-bg-opacity)) 100% ); top: 0; left: 0; diff --git a/app/layout.tsx b/app/layout.tsx index dc24d4c..9984842 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,4 +1,3 @@ -import Sidebar from "./components/Sidebar"; import "./globals.css"; import { Lexend } from "next/font/google"; const poppins = Lexend({ @@ -6,9 +5,7 @@ const poppins = Lexend({ weight: ["200", "500", "700"], variable: "--font-poppins", }); -import Header from "./components/Header"; -import NextTopLoader from "nextjs-toploader"; -import MobileTab from "./components/mobile/MobileTab"; + import { Metadata } from "next"; import PageWraper from "./PageWraper"; diff --git a/app/movie/[movieId]/layout.tsx b/app/movie/[movieId]/layout.tsx index 4991988..fb62cc1 100644 --- a/app/movie/[movieId]/layout.tsx +++ b/app/movie/[movieId]/layout.tsx @@ -3,7 +3,6 @@ import React from "react"; import Image from "next/image"; import MovieDetailTab from "@/app/components/MovieDetailTab"; import WatchTrailerButton from "@/app/components/WatchTrailerButton"; -import Modal from "@/app/components/Modal"; import tmdb from "@/service/TMDB"; import ShadowImg from "@/app/components/ShadowImg"; import Link from "next/link"; @@ -132,7 +131,6 @@ async function Layout({ params, children }: MovieDetailProp) { {children} - {/* */} ); } diff --git a/app/movie/[movieId]/page.tsx b/app/movie/[movieId]/page.tsx index eedbe21..6d03f18 100644 --- a/app/movie/[movieId]/page.tsx +++ b/app/movie/[movieId]/page.tsx @@ -3,9 +3,7 @@ import { Movie, People } from "@/service/TMDB.type"; import Link from "next/link"; import tmdb from "@/service/TMDB"; import { Metadata } from "next"; - import ListMovie from "@/app/components/CardSlide"; -import PeopleCard from "@/app/components/PeopleCard"; export interface Cast { id: number; profile_path: string; @@ -38,11 +36,12 @@ async function Page({ const slicedRecommendations = { results: listRecommendations.results.slice(0, 9), }; + return (
-
+

Original Title

{movie.original_title} diff --git a/app/setting/page.tsx b/app/setting/page.tsx index e621a15..f2450f0 100644 --- a/app/setting/page.tsx +++ b/app/setting/page.tsx @@ -205,6 +205,22 @@ function Page() { halloween

+
+ + handleChangeTheme("nord") + } + type="radio" + name="radio-1" + className="radio radio-primary md:tooltip hover:bg-primary" + data-tip="nord" + checked={theme === "nord"} + /> +

nord

+
diff --git a/context/AppProvider.tsx b/context/AppProvider.tsx index 14b573e..a3fd0a7 100644 --- a/context/AppProvider.tsx +++ b/context/AppProvider.tsx @@ -2,7 +2,6 @@ import React, { createContext, useState, useEffect } from "react"; import Image from "next/image"; import { motion } from "framer-motion"; import useStore from "@/app/(store)/store"; -interface IAppContext {} interface IProps { children: React.ReactNode; } @@ -21,6 +20,7 @@ function AppProvider({ children }: IProps) { } setTimeout(() => setLoading(false), 2000); }, [setTheme]); + return ( {loading ? ( diff --git a/hooks/useWindowDemensions.tsx b/hooks/useWindowDemensions.tsx index aebd5e5..d62891f 100644 --- a/hooks/useWindowDemensions.tsx +++ b/hooks/useWindowDemensions.tsx @@ -1,4 +1,3 @@ -import useStore from "@/app/(store)/store"; import { useState, useEffect } from "react"; function getWindowDimensions() { if (typeof window !== "undefined") { diff --git a/package-lock.json b/package-lock.json index 5ff3c2c..9e2758b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,6 @@ "@types/react-dom": "18.2.4", "autoprefixer": "10.4.14", "color-thief-react": "^2.1.0", - "daisyui": "^3.0.4", "eslint": "8.40.0", "eslint-config-next": "13.4.2", "framer-motion": "^10.12.11", @@ -32,6 +31,9 @@ "tailwindcss": "3.3.2", "typescript": "5.0.4", "zustand": "^4.3.8" + }, + "devDependencies": { + "daisyui": "^4.4.19" } }, "node_modules/@alloc/quick-lru": { @@ -1149,11 +1151,6 @@ "react": "^16.8.0" } }, - "node_modules/colord": { - "version": "2.9.3", - "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", - "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==" - }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -1200,6 +1197,7 @@ "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" @@ -1221,6 +1219,15 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, + "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/cwise-compiler": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/cwise-compiler/-/cwise-compiler-1.1.3.tgz", @@ -1230,21 +1237,22 @@ } }, "node_modules/daisyui": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.4.tgz", - "integrity": "sha512-KfQXj1WD0U0qA+9olKqZRgqu/D6udA3+DjsT5PIdk3dOAFFbyzYzUiadiAbZ/QHe98IDBWHmVjjB51Hxg8TydQ==", + "version": "4.4.19", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.4.19.tgz", + "integrity": "sha512-IjOLWwnndD4N7Ut5CDxbUsaVtbqXPeVHM92IcgxGFxpuOd3CCKW/PAXZH6JoBTHFRaN57vB9XqEhdWm5yC+bPA==", + "dev": true, "dependencies": { - "colord": "^2.9", "css-selector-tokenizer": "^0.8", - "postcss-js": "^4", - "tailwindcss": "^3" + "culori": "^3", + "picocolors": "^1", + "postcss-js": "^4" + }, + "engines": { + "node": ">=16.9.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/daisyui" - }, - "peerDependencies": { - "postcss": "^8" } }, "node_modules/damerau-levenshtein": { @@ -2070,7 +2078,8 @@ "node_modules/fastparse": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", - "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==" + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true }, "node_modules/fastq": { "version": "1.15.0", @@ -5822,11 +5831,6 @@ } } }, - "colord": { - "version": "2.9.3", - "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", - "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==" - }, "combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -5864,6 +5868,7 @@ "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, "requires": { "cssesc": "^3.0.0", "fastparse": "^1.1.2" @@ -5879,6 +5884,12 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, + "culori": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz", + "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==", + "dev": true + }, "cwise-compiler": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/cwise-compiler/-/cwise-compiler-1.1.3.tgz", @@ -5888,14 +5899,15 @@ } }, "daisyui": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.4.tgz", - "integrity": "sha512-KfQXj1WD0U0qA+9olKqZRgqu/D6udA3+DjsT5PIdk3dOAFFbyzYzUiadiAbZ/QHe98IDBWHmVjjB51Hxg8TydQ==", + "version": "4.4.19", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.4.19.tgz", + "integrity": "sha512-IjOLWwnndD4N7Ut5CDxbUsaVtbqXPeVHM92IcgxGFxpuOd3CCKW/PAXZH6JoBTHFRaN57vB9XqEhdWm5yC+bPA==", + "dev": true, "requires": { - "colord": "^2.9", "css-selector-tokenizer": "^0.8", - "postcss-js": "^4", - "tailwindcss": "^3" + "culori": "^3", + "picocolors": "^1", + "postcss-js": "^4" } }, "damerau-levenshtein": { @@ -6521,7 +6533,8 @@ "fastparse": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", - "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==" + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true }, "fastq": { "version": "1.15.0", diff --git a/package.json b/package.json index 0222052..e71a553 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,6 @@ "@types/react-dom": "18.2.4", "autoprefixer": "10.4.14", "color-thief-react": "^2.1.0", - "daisyui": "^3.0.4", "eslint": "8.40.0", "eslint-config-next": "13.4.2", "framer-motion": "^10.12.11", @@ -33,5 +32,8 @@ "tailwindcss": "3.3.2", "typescript": "5.0.4", "zustand": "^4.3.8" + }, + "devDependencies": { + "daisyui": "^4.4.19" } } diff --git a/tailwind.config.js b/tailwind.config.js index afdd473..703842e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -52,6 +52,7 @@ module.exports = { "night", "coffee", "winter", + "nord", ], }, plugins: [require("daisyui")],