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