fix: update dependencies and fix z-index issues
- Update Swiper imports to use 'swiper/modules' for v12+ compatibility - Migrate Tailwind CSS v4 configuration with @tailwindcss/postcss - Update globals.css to use @import "tailwindcss" syntax - Fix nav dropdown z-index to appear above main content - Replace deprecated NextSeo with next/head - Update React Query Hydrate to HydrationBoundary for v5 - Remove unused imports from queries.ts
This commit is contained in:
parent
492631ab7e
commit
a06e3fbf11
|
|
@ -22,8 +22,6 @@ import { VideoModel } from "@/models/video.model";
|
|||
import { VideosModel } from "@/models/videos.model";
|
||||
import { IVote } from "@/models/vote.model";
|
||||
import routes from "@/routes";
|
||||
import { revalidateTag } from "next/cache";
|
||||
import { cookies } from "next/headers";
|
||||
|
||||
export class Queries {
|
||||
public static async getNews(
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import Hydrate from '@/utils/HydrateClient';
|
|||
import getQueryClient from '@/utils/getQueryClient';
|
||||
import { dehydrate, useQuery } from '@tanstack/react-query';
|
||||
import { data } from 'autoprefixer';
|
||||
import { NextSeo } from 'next-seo';
|
||||
import Head from 'next/head';
|
||||
import Image from 'next/image';
|
||||
import { useContext } from 'react';
|
||||
import { useMediaQuery } from 'usehooks-ts';
|
||||
|
|
@ -36,7 +36,12 @@ const PageItem = ({ params }: IParams) => {
|
|||
return (
|
||||
<div className="container">
|
||||
<div className="flex flex-col gap-8 py-6">
|
||||
{data && <NextSeo title={data.data.title} description={data.data.content} />}
|
||||
{data && (
|
||||
<Head>
|
||||
<title>{data.data.title}</title>
|
||||
<meta name="description" content={data.data.content} />
|
||||
</Head>
|
||||
)}
|
||||
<div className="flex flex-col gap-2">
|
||||
{data?.data.title ? <PageTitle title={data?.data.title} /> : <Loader />}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import "tailwindcss";
|
||||
@config "../tailwind.config.js";
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
|
|
@ -129,12 +128,16 @@ video {
|
|||
}
|
||||
|
||||
main,
|
||||
nav,
|
||||
footer {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav {
|
||||
z-index: 50;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0.7;
|
||||
|
|
|
|||
|
|
@ -97,10 +97,10 @@ const Nav = () => {
|
|||
</svg>
|
||||
|
||||
<div
|
||||
className={`absolute top-10 left-1/2 -translate-x-1/2 bg-[#353598] flex flex-col gap-4 p-[24px] rounded-[8px] transition-all duration-300 w-[160px] ${
|
||||
className={`absolute top-10 left-1/2 -translate-x-1/2 z-50 bg-[#353598] flex flex-col gap-4 p-[24px] rounded-[8px] transition-all duration-300 w-[160px] ${
|
||||
dropDownOpened
|
||||
? 'opacity-100 translate-y-0 pointer-events-auto'
|
||||
: ' opacity-0 translate-y-2 pointer-events-none'
|
||||
: 'opacity-0 translate-y-2 pointer-events-none'
|
||||
}`}>
|
||||
<Link
|
||||
href={'/quiz/active'}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { Swiper, SwiperSlide } from 'swiper/react';
|
|||
import Loader from './Loader';
|
||||
import MaterialsContext from '@/context/MaterialsContext';
|
||||
import MoreBtn from './MoreBtn';
|
||||
import { Autoplay, Navigation } from 'swiper';
|
||||
import { Autoplay, Navigation } from 'swiper/modules';
|
||||
import { Queries } from '@/api/queries';
|
||||
import VideoItem from './VideoItem';
|
||||
import { useContext } from 'react';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
'use client';
|
||||
import Image from 'next/image';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Autoplay, Navigation, Pagination } from 'swiper';
|
||||
import { Autoplay, Navigation, Pagination } from 'swiper/modules';
|
||||
import { Queries } from '@/api/queries';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import Loader from '../Loader';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
'use client';
|
||||
import Image from 'next/image';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';
|
||||
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper/modules';
|
||||
import { v4 } from 'uuid';
|
||||
import Link from 'next/link';
|
||||
import { Queries } from '@/api/queries';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
'use client';
|
||||
import Image from 'next/image';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';
|
||||
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper/modules';
|
||||
import { v4 } from 'uuid';
|
||||
import Link from 'next/link';
|
||||
import { HomeModel } from '@/models/home.model';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
'use client';
|
||||
import Image from 'next/image';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';
|
||||
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper/modules';
|
||||
import { v4 } from 'uuid';
|
||||
import Link from 'next/link';
|
||||
import { Queries } from '@/api/queries';
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { useQuery } from '@tanstack/react-query';
|
|||
import Loader from '../Loader';
|
||||
import Link from 'next/link';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Autoplay, Navigation, Pagination } from 'swiper';
|
||||
import { Autoplay, Navigation, Pagination } from 'swiper/modules';
|
||||
import { v4 } from 'uuid';
|
||||
|
||||
const Banner = () => {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import Image from 'next/image';
|
|||
import Loader from '../Loader';
|
||||
import baseUrl from '@/baseUrl';
|
||||
import PageTitle from '../PageTitle';
|
||||
import { NextSeo } from 'next-seo';
|
||||
import Head from 'next/head';
|
||||
|
||||
interface IProps {
|
||||
id: string;
|
||||
|
|
@ -54,10 +54,10 @@ const Item = ({ id }: IProps) => {
|
|||
dangerouslySetInnerHTML={{ __html: data!.data.content_html }}></p>
|
||||
</div>
|
||||
</div> */}
|
||||
<NextSeo
|
||||
title={bannerData?.data[0] ? bannerData?.data[0].title : ''}
|
||||
description={data!.data.excerpt}
|
||||
/>
|
||||
<Head>
|
||||
<title>{bannerData?.data[0] ? bannerData?.data[0].title : ''}</title>
|
||||
<meta name="description" content={data!.data.excerpt} />
|
||||
</Head>
|
||||
<div className="flex flex-col gap-2">
|
||||
<PageTitle title={bannerData?.data[0] ? bannerData?.data[0].title : ''} />
|
||||
<p className="text-lg">{data?.data.published_at}</p>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use client';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Autoplay } from 'swiper';
|
||||
import { Navigation, Autoplay } from 'swiper/modules';
|
||||
import { InfiniteData } from '@tanstack/react-query';
|
||||
import { NewsModel } from '@/models/news.model';
|
||||
import { v4 } from 'uuid';
|
||||
|
|
|
|||
90
package.json
90
package.json
|
|
@ -9,58 +9,58 @@
|
|||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.6",
|
||||
"@emotion/styled": "^11.10.6",
|
||||
"@hookform/resolvers": "^3.10.0",
|
||||
"@mui/material": "^5.12.1",
|
||||
"@mui/x-date-pickers": "^6.5.0",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.2",
|
||||
"@radix-ui/react-dialog": "^1.1.2",
|
||||
"@radix-ui/react-label": "^2.1.2",
|
||||
"@radix-ui/react-popover": "^1.1.1",
|
||||
"@radix-ui/react-slot": "^1.1.2",
|
||||
"@tanstack/react-query": "^4.32.0",
|
||||
"@tanstack/react-query-devtools": "^4.32.0",
|
||||
"@types/node": "18.15.13",
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.1",
|
||||
"@hookform/resolvers": "^5.2.2",
|
||||
"@mui/material": "^7.3.7",
|
||||
"@mui/x-date-pickers": "^8.26.0",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-label": "^2.1.8",
|
||||
"@radix-ui/react-popover": "^1.1.15",
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"@tanstack/react-query": "^5.90.20",
|
||||
"@tanstack/react-query-devtools": "^5.91.2",
|
||||
"@types/node": "25.0.10",
|
||||
"@types/react": "19.0.8",
|
||||
"@types/react-dom": "19.0.3",
|
||||
"@types/uuid": "^9.0.1",
|
||||
"autoprefixer": "10.4.14",
|
||||
"axios": "^1.5.1",
|
||||
"@types/uuid": "^11.0.0",
|
||||
"autoprefixer": "10.4.23",
|
||||
"axios": "^1.13.2",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"date-fns": "^2.30.0",
|
||||
"dayjs": "^1.11.7",
|
||||
"framer-motion": "^10.12.16",
|
||||
"lucide-react": "^0.408.0",
|
||||
"next": "15.1.6",
|
||||
"next-seo": "^6.0.0",
|
||||
"postcss": "8.4.23",
|
||||
"react": "19.0.0",
|
||||
"react-confetti": "^6.1.0",
|
||||
"react-day-picker": "^8.10.1",
|
||||
"react-dom": "19.0.0",
|
||||
"react-fast-marquee": "^1.3.5",
|
||||
"react-hook-form": "^7.54.2",
|
||||
"react-icons": "^4.8.0",
|
||||
"react-player": "^2.12.0",
|
||||
"react-slot-counter": "^3.0.4",
|
||||
"react-use": "^17.5.1",
|
||||
"sharp": "^0.33.5",
|
||||
"swiper": "^9.2.4",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"tailwindcss": "3.3.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"dayjs": "^1.11.19",
|
||||
"framer-motion": "^12.29.0",
|
||||
"lucide-react": "^0.563.0",
|
||||
"next": "16.1.4",
|
||||
"next-seo": "^7.0.1",
|
||||
"postcss": "8.5.6",
|
||||
"react": "19.2.3",
|
||||
"react-confetti": "^6.4.0",
|
||||
"react-day-picker": "^9.13.0",
|
||||
"react-dom": "19.2.3",
|
||||
"react-fast-marquee": "^1.6.5",
|
||||
"react-hook-form": "^7.71.1",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-player": "^3.4.0",
|
||||
"react-slot-counter": "^3.3.2",
|
||||
"react-use": "^17.6.0",
|
||||
"sharp": "^0.34.5",
|
||||
"swiper": "^12.0.3",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"tailwindcss": "4.1.18",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"typescript": "^5.2.2",
|
||||
"usehooks-ts": "^2.9.1",
|
||||
"uuid": "^9.0.0",
|
||||
"zod": "^3.24.1",
|
||||
"zustand": "^5.0.1"
|
||||
"typescript": "^5.9.3",
|
||||
"usehooks-ts": "^3.1.1",
|
||||
"uuid": "^13.0.0",
|
||||
"zod": "^4.3.6",
|
||||
"zustand": "^5.0.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/date-fns": "^2.6.0",
|
||||
"eslint": "8.49.0",
|
||||
"eslint-config-next": "15.1.6"
|
||||
"@types/date-fns": "^2.6.3",
|
||||
"eslint": "9.39.2",
|
||||
"eslint-config-next": "16.1.4"
|
||||
},
|
||||
"overrides": {
|
||||
"@types/react": "19.0.8",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
'@tailwindcss/postcss': {},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { fontFamily } from 'tailwindcss/defaultTheme';
|
||||
import defaultTheme from 'tailwindcss/defaultTheme';
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export const content = [
|
||||
'./pages/**/*.{js,ts,jsx,tsx}',
|
||||
|
|
@ -163,11 +163,11 @@ export const theme = {
|
|||
'4xl': ['0 35px 35px rgba(0, 0, 0, 0.25)', '0 45px 65px rgba(0, 0, 0, 0.15)'],
|
||||
},
|
||||
fontFamily: {
|
||||
aeroport: ['var(--font-aeroport)', ...fontFamily.sans],
|
||||
roboto: ['var(--font-roboto)', ...fontFamily.sans],
|
||||
mw: ['var(--font-mw)', ...fontFamily.sans],
|
||||
mw_sans: ['var(--font-mwsans)', ...fontFamily.sans],
|
||||
alexandria: ['var(--font-alexandria)', ...fontFamily.sans],
|
||||
aeroport: ['var(--font-aeroport)', ...defaultTheme.fontFamily.sans],
|
||||
roboto: ['var(--font-roboto)', ...defaultTheme.fontFamily.sans],
|
||||
mw: ['var(--font-mw)', ...defaultTheme.fontFamily.sans],
|
||||
mw_sans: ['var(--font-mwsans)', ...defaultTheme.fontFamily.sans],
|
||||
alexandria: ['var(--font-alexandria)', ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
gridTemplateRows: {
|
||||
full3: 'repeat(3, 33.333333333333333333333%)',
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
"use client";
|
||||
|
||||
import { Hydrate as RQHydrate, HydrateProps } from "@tanstack/react-query";
|
||||
import { HydrationBoundary, HydrationBoundaryProps } from "@tanstack/react-query";
|
||||
|
||||
function Hydrate(props: HydrateProps) {
|
||||
return <RQHydrate {...props} />;
|
||||
function Hydrate(props: HydrationBoundaryProps) {
|
||||
return <HydrationBoundary {...props} />;
|
||||
}
|
||||
|
||||
export default Hydrate;
|
||||
|
|
|
|||
Loading…
Reference in New Issue