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

media sizes changed

This commit is contained in:
Batyr 2025-05-22 15:58:58 +05:00
parent 8d557ea431
commit 5bb1ee3adf
3 changed files with 72 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/shared/media-modal.tsx
View File

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

4
src/hooks/tanstack/use-photos.ts
View File

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

126
src/pages/media.tsx
View File

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