merdan
/
turkmen-tv-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/queries.ts
View File

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

9
app/(main)/[page_id]/page.tsx
View File

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

11
app/globals.css
View File

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

1843
bun.lock Normal file
View File

File diff suppressed because it is too large Load Diff

4
components/Nav.tsx
View File

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

2
components/VideoList.tsx
View File

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

2
components/home/MainSwiper.tsx
View File

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

2
components/home/SmallSwiperAdvert.tsx
View File

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

2
components/home/SmallSwiperNews.tsx
View File

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

2
components/home/SmallSwiperVideos.tsx
View File

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

2
components/live/Banner.tsx
View File

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

10
components/news/NewsItem.tsx
View File

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

2
components/news/NewsSlider.tsx
View File

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

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

3
postcss.config.js
View File

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

12
tailwind.config.js
View File

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

6
utils/HydrateClient.tsx
View File

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