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:
Atash03 2026-01-24 14:41:32 +05:00
parent 492631ab7e
commit a06e3fbf11
17 changed files with 1926 additions and 78 deletions

View File

@ -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(

View File

@ -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>

View File

@ -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;

1843
bun.lock Normal file

File diff suppressed because it is too large Load Diff

View File

@ -97,7 +97,7 @@ 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'

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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 = () => {

View File

@ -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>

View File

@ -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';

View File

@ -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",

View File

@ -1,6 +1,5 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'@tailwindcss/postcss': {},
},
}

View File

@ -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%)',

View File

@ -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;