diff --git a/src/app/layout.tsx b/src/app/layout.tsx index af4808b..0840fb7 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -56,38 +56,16 @@ export default function RootLayout({ + ); diff --git a/src/components/pages/MainPage/Clients/Clients.tsx b/src/components/pages/MainPage/Clients/Clients.tsx index 13145f9..948645e 100644 --- a/src/components/pages/MainPage/Clients/Clients.tsx +++ b/src/components/pages/MainPage/Clients/Clients.tsx @@ -9,7 +9,7 @@ import { GradientButton } from "@/ui/GradientButton"; import { Title } from "@/ui/Title"; import { getCompaniesCount } from "@/utils/getCompaniesCount"; import { shuffle } from "@/utils/shuffle"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { GridContextProvider, GridDropZone, swap } from "react-grid-dnd"; import AddIcon from "@/components/icons/AddIcon"; import RestartIcon from "@/components/icons/RestartIcon"; @@ -26,32 +26,36 @@ export function Clients() { const [shuffled, setShuffled] = useState([]); - const excludeCompanies = [ - "Рисан", - "Efes", - "ЭНКО", - "КамаСтройИнвест", - "Брусника", - "Маяк", - "Мавис", - "НКС", - "Паритет", - "Лето", - "СБК", - "Делом", - "УГМК", - "ГК Альфа", - "Синара", - "Кортрос", - "Атмосфера", - "Голос", - "Сибинтел", - "Основа", - "Центр-Инвест", - "DNS", - "ПСК Дом девелопмент", - "ПИК", - ]; + const excludeCompanies = useMemo( + () => [ + "Рисан", + "Efes", + "ЭНКО", + "КамаСтройИнвест", + "Брусника", + "Маяк", + "Мавис", + "НКС", + "Паритет", + "Лето", + "СБК", + "Делом", + "УГМК", + "ГК Альфа", + "Синара", + "Кортрос", + "Атмосфера", + "Голос", + "Сибинтел", + "Основа", + "Центр-Инвест", + "DNS", + "ПСК Дом девелопмент", + "ПИК", + "ГК «‎Сумма элементов»", + ], + [] + ); useEffect(() => { if (!companies) return; @@ -63,7 +67,7 @@ export function Clients() { setEnCompanies( shuffled.filter((company) => !excludeCompanies.includes(company.title)) ); - }, [shuffled]); + }, [excludeCompanies, shuffled]); const ref = useRef(null); @@ -108,7 +112,7 @@ export function Clients() { }`} ref={ref} > -
+
<span className="text-gradient"> {count !== undefined && getCompaniesCount(count, locale)} @@ -117,7 +121,7 @@ export function Clients() { } - className="aspect-square flex flex-col items-center justify-center gap-3" + className="aspect-square flex flex-col gap-3 justify-center items-center" >
@@ -157,7 +161,7 @@ export function Clients() { /> ))}
-
+

Graff.estate stream is available on any device — all you need for diff --git a/src/components/pages/MainPage/Projects.tsx b/src/components/pages/MainPage/Projects.tsx index f3077fc..4d38654 100644 --- a/src/components/pages/MainPage/Projects.tsx +++ b/src/components/pages/MainPage/Projects.tsx @@ -11,8 +11,8 @@ import { queryOptions, useQuery } from "@tanstack/react-query"; import { useLocale, useTranslations } from "next-intl"; export function Projects() { - // const { data: projects } = useGetProjectsQuery(); - const { data: projects } = useQuery(queryProjectsOptions); + const { data: projects } = useGetProjectsQuery(); + // const { data: projects } = useQuery(queryProjectsOptions); const t = useTranslations("projects"); const locale = useLocale(); diff --git a/src/components/pages/MainPage/Streaming/Streaming.tsx b/src/components/pages/MainPage/Streaming/Streaming.tsx index 710cab4..4aff546 100644 --- a/src/components/pages/MainPage/Streaming/Streaming.tsx +++ b/src/components/pages/MainPage/Streaming/Streaming.tsx @@ -1,18 +1,18 @@ -'use client'; +"use client"; -import { useGetProjectsQuery } from '@/queries/getProjects'; -import { Title } from '@/ui/Title'; -import { VideoPlayer } from '@/ui/VideoPlayer'; -import { motion } from 'framer-motion'; -import Link from 'next/link'; -import { useState } from 'react'; -import { useSwipeable } from 'react-swipeable'; -import { StreamingProject } from './StreamingProject'; -import { useTranslations } from 'next-intl'; +import { useGetProjectsQuery } from "@/queries/getProjects"; +import { Title } from "@/ui/Title"; +import { VideoPlayer } from "@/ui/VideoPlayer"; +import { motion } from "framer-motion"; +import Link from "next/link"; +import { useState } from "react"; +import { useSwipeable } from "react-swipeable"; +import { StreamingProject } from "./StreamingProject"; +import { useTranslations } from "next-intl"; export function Streaming() { const { data: streamingProjects } = useGetProjectsQuery( - 'Удаленная демонстрация' + "Удаленная демонстрация" ); const [isViewportEntered, setIsViewportEntered] = useState(false); @@ -41,28 +41,27 @@ export function Streaming() { touchEventOptions: { passive: false }, }); - const t = useTranslations('streaming'); + const t = useTranslations("streaming"); return ( - {t('title1')} - <span className="text-gradient"> {t('title2')}</span>{' '} - {t('title3')} + {t("title1")} + <span className="text-gradient"> {t("title2")}</span> {t("title3")} - <span className="text-gradient">{t('title4')}</span> - {t('title5')} + <span className="text-gradient">{t("title4")}</span> + {t("title5")}

- {streamingProjects?.slice(0, 3).map((project, index, { length }) => ( + {/* {streamingProjects?.slice(0, 3).map((project, index, { length }) => ( - ))} -
-

- {t('info')} -

+

{t("info")}

- {t('leave_request')} + {t("leave_request")}
-
+
*/}

- {t('demo_available')} + {t("demo_available")}

diff --git a/src/consts/mockEnMapProject.tsx b/src/consts/mockEnMapProject.tsx index a73f2b4..2d45460 100644 --- a/src/consts/mockEnMapProject.tsx +++ b/src/consts/mockEnMapProject.tsx @@ -125,7 +125,7 @@ export const enMapProjects: EnMapProject[] = [ video: "/videos/pages/home/Риваят.mp4", }, { - logo: "/img/pages/home/Brusnika.png", + logo: "/img/pages/home/brusnika.png", video: "/videos/pages/home/Izdanie.mp4", }, ]; diff --git a/src/queries/getProjects.ts b/src/queries/getProjects.ts index 2e17a85..44c17bf 100644 --- a/src/queries/getProjects.ts +++ b/src/queries/getProjects.ts @@ -1,34 +1,35 @@ -import { api } from '@/api'; -import { streaming } from '@/consts/streaming'; -import { IProject } from '@/types/IProject'; -import { queryOptions, useQuery } from '@tanstack/react-query'; +import { api } from "@/api"; +import { streaming } from "@/consts/streaming"; +import { IProject } from "@/types/IProject"; +import { queryOptions, useQuery } from "@tanstack/react-query"; export const queryProjectsOptions = queryOptions({ - queryKey: ['projects'], - queryFn: () => api.get('projects').json(), + queryKey: ["projects"], + queryFn: () => api.get("projects").json(), + select: (data) => data.filter((p) => "BARAHA TOWN" !== p.englishTitle), }); export function useGetProjectsQuery(tags?: string | string[]) { - return useQuery( tags && tags.length > 0 ? queryOptions({ - queryKey: ['projects', ...(Array.isArray(tags) ? tags : [tags])], - queryFn: () => - api - .get( - `projects?${Array.isArray(tags) - ? tags.map((tag) => `tags=${tag}`).join('&') - : 'tags=' + tags - }` - ) - .json(), - select: - tags === 'Удаленная демонстрация' - ? (data) => - data.filter((p) => streaming.some((s) => s.title === p.title)) - : undefined, - }) + queryKey: ["projects", ...(Array.isArray(tags) ? tags : [tags])], + queryFn: () => + api + .get( + `projects?${ + Array.isArray(tags) + ? tags.map((tag) => `tags=${tag}`).join("&") + : "tags=" + tags + }` + ) + .json(), + select: + tags === "Удаленная демонстрация" + ? (data) => + data.filter((p) => streaming.some((s) => s.title === p.title)) + : (data) => data.filter((p) => "BARAHA TOWN" !== p.englishTitle), + }) : queryProjectsOptions ); } diff --git a/src/ui/VideoPlayer.tsx b/src/ui/VideoPlayer.tsx index 2933290..703e5c7 100644 --- a/src/ui/VideoPlayer.tsx +++ b/src/ui/VideoPlayer.tsx @@ -1,6 +1,6 @@ -'use client'; +"use client"; -import { AnimatePresence, motion } from 'framer-motion'; +import { AnimatePresence, motion } from "framer-motion"; import { ComponentProps, forwardRef, @@ -8,9 +8,9 @@ import { useImperativeHandle, useRef, useState, -} from 'react'; -import { VideoMutingBtn } from './VideoMutingBtn'; -import { VideoProgressBar } from './VideoProgressBar'; +} from "react"; +import { VideoMutingBtn } from "./VideoMutingBtn"; +import { VideoProgressBar } from "./VideoProgressBar"; export const VideoPlayer = forwardRef< HTMLVideoElement, @@ -18,7 +18,7 @@ export const VideoPlayer = forwardRef< src: string; showMutingBtn: boolean; children?: React.ReactNode; - } & ComponentProps<'video'> + } & ComponentProps<"video"> >( ( { src, showMutingBtn, children, loop = true, autoPlay = true, className }, @@ -48,7 +48,7 @@ export const VideoPlayer = forwardRef< function handlePlaybackClick() { if (!videoRef.current) return; setPlaying(videoRef.current.paused); - videoRef.current[videoRef.current.paused ? 'play' : 'pause'](); + videoRef.current[videoRef.current.paused ? "play" : "pause"](); } useEffect(() => { @@ -57,8 +57,8 @@ export const VideoPlayer = forwardRef< const timeUpdateHandler = () => setProgress(((video.currentTime ?? 0) / (video.duration ?? 1)) * 100); - videoRef.current.addEventListener('timeupdate', timeUpdateHandler); - return () => video.removeEventListener('timeupdate', timeUpdateHandler); + videoRef.current.addEventListener("timeupdate", timeUpdateHandler); + return () => video.removeEventListener("timeupdate", timeUpdateHandler); }, []); const [isViewportEntered, setIsViewportEntered] = useState(false); @@ -71,19 +71,19 @@ export const VideoPlayer = forwardRef< return (