From 5bb1ee3adfe4d22e281a35fdf8e85b029a2cb4b4 Mon Sep 17 00:00:00 2001
From: Batyr <awbatyr@gmail.com>
Date: Thu, 22 May 2025 15:58:58 +0500
Subject: [PATCH] media sizes changed

---
 src/components/shared/media-modal.tsx |   6 +-
 src/hooks/tanstack/use-photos.ts      |   4 +-
 src/pages/media.tsx                   | 126 ++++++++++++++------------
 3 files changed, 72 insertions(+), 64 deletions(-)

diff --git a/src/components/shared/media-modal.tsx b/src/components/shared/media-modal.tsx
index add1cbc..e2b9716 100644
--- a/src/components/shared/media-modal.tsx
+++ b/src/components/shared/media-modal.tsx
@@ -69,7 +69,7 @@ export const MediaModal: FC<Props> = ({ className, setIsOpen, activeItem }) => {
       : videos?.videos?.map((item) => (
           <div
             key={item.id}
-            className="embla__slide flex-[0_0_100%] h-[350px] md:h-[500px] lg:h-[700px] lg:px-[20%] flex items-center justify-center"
+            className="embla__slide flex-[0_0_100%] h-[80vh] lg:px-[20%] flex items-center justify-center"
           >
             <video
               src={item?.video?.path ?? ""}
@@ -87,13 +87,13 @@ export const MediaModal: FC<Props> = ({ className, setIsOpen, activeItem }) => {
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
       className={cn(
-        "fixed z-[100] top-0 left-0 pb-40 pt-28 lg:px-28 px-6 overflow-hidden min-h-screen w-full bg-black/90",
+        "fixed z-[100] top-0 left-0 pb-40 pt-20 lg:px-28 px-6 overflow-hidden min-h-screen w-full bg-black/90",
         className
       )}
     >
       <X
         onClick={() => setIsOpen(false)}
-        className="absolute top-10 right-6 p-3 md:size-20 size-16  cursor-pointer z-50 text-white hover:scale-110 transition-all duration-300"
+        className="absolute top-6 right-6 p-3 md:size-20 size-16  cursor-pointer z-50 text-white hover:scale-110 transition-all duration-300"
       />
       {
         <div className="hidden md:block">
diff --git a/src/hooks/tanstack/use-photos.ts b/src/hooks/tanstack/use-photos.ts
index 5664475..d6f78c6 100644
--- a/src/hooks/tanstack/use-photos.ts
+++ b/src/hooks/tanstack/use-photos.ts
@@ -2,11 +2,11 @@ import { useQuery } from "@tanstack/react-query";
 import { getPhotos } from "@/services/service";
 
 export const usePhotos = (id: number) => {
-  const { data, isPending, isError } = useQuery({
+  const { data, isPending, status } = useQuery({
     queryKey: ["photos", id],
     queryFn: () => getPhotos(id),
     select: ({ data }) => data.data,
   });
 
-  return { data, isPending, isError };
+  return { data, isPending, status };
 };
diff --git a/src/pages/media.tsx b/src/pages/media.tsx
index 07efcda..5545c01 100644
--- a/src/pages/media.tsx
+++ b/src/pages/media.tsx
@@ -29,7 +29,7 @@ const momentsTabs = [
 
 const Media: FC<Props> = ({ className }) => {
   const [state, setState] = useState(0);
-  const { data, isPending } = usePhotos(1);
+  const { data, isPending, status } = usePhotos(1);
   const { data: videos } = useVideos(1);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [activeItem, setActiveItem] = useState({ id: 0, type: "photo" });
@@ -41,11 +41,17 @@ const Media: FC<Props> = ({ className }) => {
     setActiveItem({ id, type });
   };
 
-  console.log(videos);
   const { t } = useTranslation("main");
 
   const [isCollapse, setIsCollapse] = useState(false);
 
+  const getLoading = (i: number) => {
+    if (i === 0 && isPending) return <Loader />;
+    else return <Loader />;
+  };
+
+  console.log(status);
+
   return (
     <>
       <AnimatePresence>
@@ -58,73 +64,75 @@ const Media: FC<Props> = ({ className }) => {
         )}
       </AnimatePresence>
 
-      <section className={cn("", className)}>
+      <section className={cn("md:mb-[120px] mb-20", className)}>
         <Cover title={lang === "ru" ? "Моменты" : "Moments"} />
 
         <Container className="page-bottom md:pt-10 pt-6">
-          {isPending ? (
-            <Loader />
-          ) : (
-            <div className="flex justify-center flex-col">
-              <Tabs
-                state={state}
-                setState={setState}
-                data={momentsTabs}
-                className="mb-6"
-              />
-              <h3 className="md:text-3xl text-2xl mb-6">2025</h3>
-              <div className="grid lg:grid-cols-4 lg:gap-y-4 lg:gap-x-6 md:gap-6 gap-4 grid-cols-2 place-items-center">
-                {state === 0
-                  ? data?.photos
-                      ?.slice(0, isCollapse ? 1000 : 16)
-                      ?.map((photo, i) => (
+          <div className="flex justify-center flex-col">
+            <Tabs
+              state={state}
+              setState={setState}
+              data={momentsTabs}
+              className="mb-6"
+            />
+            {state === 0 && isPending ? (
+              getLoading(state)
+            ) : (
+              <>
+                <h3 className="md:text-3xl text-2xl mb-6">2025</h3>
+                <div className="grid lg:grid-cols-4 lg:gap-y-4 lg:gap-x-6 md:gap-6 gap-4 grid-cols-2 place-items-center">
+                  {state === 0
+                    ? data?.photos
+                        ?.slice(0, isCollapse ? 1000 : 16)
+                        ?.map((photo, i) => (
+                          <div
+                            onClick={() => onItem({ id: i, type: "photo" })}
+                            key={i}
+                            className="cursor-pointer embla__slide basis-1/1 overflow-hidden"
+                          >
+                            <img
+                              src={photo?.photo?.path ?? ""}
+                              alt={photo?.photo?.file_name ?? "photo"}
+                              className="size-full object-cover hover:scale-105 duration-300 transition-all"
+                            />
+                          </div>
+                        ))
+                    : videos?.videos?.map((video, i) => (
                         <div
-                          onClick={() => onItem({ id: i, type: "photo" })}
+                          onClick={() => onItem({ id: i, type: "video" })}
                           key={i}
-                          className="cursor-pointer embla__slide basis-1/1 overflow-hidden"
+                          className="cursor-pointer group embla__slide h-[155px] w-full basis-1/1 overflow-hidden relative"
                         >
+                          <Play
+                            fill="white"
+                            size={20}
+                            color="white"
+                            className="absolute group-hover:scale-125 transition-all duration-300 top-1/2 z-10 left-1/2 -translate-x-1/2 -translate-y-1/2 "
+                          />
+                          <div className="absolute top-0 left-0 size-full bg-[#2C57A752]/[32%]" />
                           <img
-                            src={photo?.photo?.path ?? ""}
-                            alt={photo?.photo?.file_name ?? "photo"}
-                            className="size-full object-cover hover:scale-105 duration-300 transition-all"
+                            src={video?.video_photo?.path ?? ""}
+                            className="size-full object-cover"
                           />
                         </div>
-                      ))
-                  : videos?.videos?.map((video, i) => (
-                      <div
-                        onClick={() => onItem({ id: i, type: "video" })}
-                        key={i}
-                        className="cursor-pointer group embla__slide basis-1/1 overflow-hidden relative"
-                      >
-                        <Play
-                          fill="white"
-                          size={20}
-                          color="white"
-                          className="absolute group-hover:scale-125 transition-all duration-300 top-1/2 z-10 left-1/2 -translate-x-1/2 -translate-y-1/2 "
-                        />
-                        <div className="absolute top-0 left-0 size-full bg-[#2C57A752]/[32%]" />
-                        <img
-                          src={video?.video_photo?.path ?? ""}
-                          className="size-full object-cover"
-                        />
-                      </div>
-                    ))}
-              </div>
+                      ))}
+                </div>
+              </>
+            )}
 
-              {data?.photos?.length &&
-                data?.photos?.length > 16 &&
-                !isCollapse && (
-                  <Button
-                    onClick={() => setIsCollapse(true)}
-                    className="mx-auto w-[288px] mt-10 text-on_surface"
-                    size={"lg"}
-                    variant={"outline"}
-                  >
-                    {t("media.button")}
-                  </Button>
-                )}
-            </div>
-          )}
+            {data?.photos?.length &&
+              data?.photos?.length > 16 &&
+              !isCollapse && (
+                <Button
+                  onClick={() => setIsCollapse(true)}
+                  className="mx-auto w-[288px] mt-10 text-on_surface"
+                  size={"lg"}
+                  variant={"outline"}
+                >
+                  {t("media.button")}
+                </Button>
+              )}
+          </div>
         </Container>
       </section>
     </>