update daisy ui 4.4

hai0z · Dec 7, 2023 · ede7c04 · ede7c04
1 parent 2312a6f
commit ede7c04
Show file tree

Hide file tree

Showing 15 changed files with 115 additions and 46 deletions.
diff --git a/.expo/README.md 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
@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}
diff --git a/abc.ts b/abc.ts
@@ -0,0 +1,13 @@
+interface IPeople<T> {
+    name: string;
+    age: number;
+    info: T;
+}
+
+type getPeopleInfo<T> = {
+    [P in keyof IPeople<T> as `get${Capitalize<P>}`]: () => IPeople<T>[P];
+};
+
+const hehe: Partial<getPeopleInfo<string>> = {
+    getAge: () => 10,
+};
diff --git 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 (
         <motion.div
             className="card card-side bg-base-200 shadow-xl w-full hover:ring-1 hover:ring-primary hover:bg-primary/10 transition-all duration-300 my-1 mx-1 cursor-pointer"
@@ -30,6 +30,8 @@ function MovieCard2({ m, index }: { m: Movie; index: number }) {
                         width={250}
                         height={250}
                         alt="cast"
+                        placeholder="blur"
+                        blurDataURL={tmdb.getImage(m.poster_path, "w500")}
                         loading="lazy"
                         className="object-cover w-52 h-full"
                     />
@@ -54,7 +56,7 @@ function MovieCard2({ m, index }: { m: Movie; index: number }) {
         </motion.div>
     );
 }
-function MovieCard3({ m, index }: { m: Movie; index: number }) {
+function MovieCard3({ m }: { m: Movie; index: number }) {
     return (
         <motion.div
             className="card w-96 bg-base-200 shadow-md hover:ring-2 hover:ring-primary my-1 group overflow-hidden hover:shadow-primary card-compact hover:bg-primary/10"
@@ -81,6 +83,8 @@ function MovieCard3({ m, index }: { m: Movie; index: number }) {
                             height={250}
                             alt="cast"
                             loading="lazy"
+                            placeholder="blur"
+                            blurDataURL={tmdb.getImage(m.poster_path, "w500")}
                             className="group-hover:scale-110 transition-all duration-300 w-96"
                         />
                     </Link>
@@ -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
@@ -3,7 +3,7 @@ import React from "react";
 function ShadowImg() {
     return (
         <div className="absolute top-0 left-0 bottom-0 right-0 z-0">
-            <div className="h-full bg-gradient-to-b from-transparent to-[hsl(var(--b1))]"></div>
+            <div className="h-full bg-gradient-to-b from-transparent to-[oklch(var(--b1))]"></div>
         </div>
     );
 }

diff --git 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
@@ -1,14 +1,11 @@
-import Sidebar from "./components/Sidebar";
 import "./globals.css";
 import { Lexend } from "next/font/google";
 const poppins = Lexend({
     subsets: ["latin"],
     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
@@ -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) {
                 <MovieDetailTab />
                 {children}
             </div>
-            {/* <Modal /> */}
         </div>
     );
 }

diff --git 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 (
         <div className="flex flex-col lg:flex-row h-full px-2 md:px-4 gap-2 lg:mt-20 mt-8 justify-center pb-20">
             <div className="lg:w-6/12 xl:w-3/12 flex w-full gap-4 md:justify-center">
                 <div className="bg-primary/5 shadow-lg p-4 rounded-lg space-y-4 lg:max-w-[75%] h-fit w-full flex flex-col">
-                    <div className="grid grid-cols-2 lg:flex-col  lg:flex">
+                    <div className="flex flex-row justify-between">
                         <p className="font-bold">Original Title</p>
                         <p className="font-mono font-extralight">
                             {movie.original_title}

diff --git a/app/setting/page.tsx b/app/setting/page.tsx
@@ -205,6 +205,22 @@ function Page() {
                                         halloween
                                     </p>
                                 </div>
+                                <div
+                                    data-theme="nord"
+                                    className="flex gap-2 bg-transparent"
+                                >
+                                    <input
+                                        onChange={() =>
+                                            handleChangeTheme("nord")
+                                        }
+                                        type="radio"
+                                        name="radio-1"
+                                        className="radio radio-primary md:tooltip hover:bg-primary"
+                                        data-tip="nord"
+                                        checked={theme === "nord"}
+                                    />
+                                    <p className={"block md:hidden"}>nord</p>
+                                </div>
                             </div>
                         </div>
                     </div>

diff --git 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 (
         <AppContext.Provider value={{}}>
             {loading ? (

diff --git 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