feat: update layout
This commit is contained in:
parent
550df8fb36
commit
032285e2e7
@ -16,7 +16,10 @@ const router = createBrowserRouter([
|
||||
{
|
||||
path: "/treasures",
|
||||
Component: ArtworksPage,
|
||||
children: [{ index: true }, { path: ":id" }],
|
||||
},
|
||||
{
|
||||
path: "/treasures/:id",
|
||||
Component: ArtworksPage,
|
||||
},
|
||||
],
|
||||
ErrorBoundary: () => (
|
||||
|
||||
@ -4,32 +4,40 @@ import React, { useState } from "react";
|
||||
type Props = React.ComponentProps<"img"> & {
|
||||
lazySrc: string;
|
||||
containerClassName?: string;
|
||||
placeholderClassName?: string;
|
||||
placeholder?: React.ReactNode;
|
||||
};
|
||||
|
||||
const LazyImage = ({
|
||||
lazySrc,
|
||||
src,
|
||||
containerClassName,
|
||||
placeholderClassName,
|
||||
className,
|
||||
placeholder,
|
||||
...props
|
||||
}: Props) => {
|
||||
const [isLoaded, setLoaded] = useState(false);
|
||||
|
||||
return (
|
||||
<div className={cn("relative", containerClassName)}>
|
||||
<div
|
||||
className={cn(
|
||||
"bg-no-repeat bg-cover",
|
||||
!isLoaded ? "blur-md" : "",
|
||||
containerClassName
|
||||
"absolute inset-0 bg-no-repeat bg-cover blur-md z-0 transition-all duration-500",
|
||||
placeholderClassName,
|
||||
isLoaded ? "brightness-75" : ""
|
||||
)}
|
||||
style={{ backgroundImage: `url('${lazySrc}')` }}
|
||||
>
|
||||
></div>
|
||||
|
||||
{!isLoaded && placeholder ? placeholder : null}
|
||||
|
||||
<img
|
||||
src={src}
|
||||
loading="lazy"
|
||||
onLoad={() => setLoaded(true)}
|
||||
onLoad={() => setTimeout(() => setLoaded(true), 50)}
|
||||
className={cn(
|
||||
"transition-all",
|
||||
"transition-all duration-500 relative z-[1]",
|
||||
isLoaded ? "opacity-100" : "opacity-0",
|
||||
className
|
||||
)}
|
||||
|
||||
83
src/pages/artworks/ArtworkListing.tsx
Normal file
83
src/pages/artworks/ArtworkListing.tsx
Normal file
@ -0,0 +1,83 @@
|
||||
import pb from "@/utility/api";
|
||||
import { useInfiniteQuery } from "react-query";
|
||||
import { Link } from "react-router-dom";
|
||||
import LazyImage from "@/components/ui/LazyImage";
|
||||
import React, { useMemo } from "react";
|
||||
import Button from "@/components/ui/Button";
|
||||
import { useBottomScrollListener } from "react-bottom-scroll-listener";
|
||||
import { Skeleton } from "@/components/ui/Skeleton";
|
||||
|
||||
const ArtworkListing = () => {
|
||||
const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
|
||||
useInfiniteQuery({
|
||||
queryKey: ["artworks"],
|
||||
queryFn: ({ pageParam = 1 }) => {
|
||||
return pb
|
||||
.collection("artworks")
|
||||
.getList(pageParam, 12, { sort: "-created" });
|
||||
},
|
||||
getNextPageParam: (lastPage) =>
|
||||
lastPage.page < lastPage.totalPages ? lastPage.page + 1 : undefined,
|
||||
});
|
||||
|
||||
useBottomScrollListener<HTMLDivElement>(
|
||||
() => {
|
||||
if (!isFetchingNextPage) {
|
||||
fetchNextPage();
|
||||
}
|
||||
},
|
||||
{ offset: 100 }
|
||||
);
|
||||
|
||||
const items = useMemo(
|
||||
() => data?.pages.flatMap((i) => i.items) || [],
|
||||
[data]
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 mt-8">
|
||||
{items.map((item) => (
|
||||
<Link
|
||||
key={item.id}
|
||||
to={`/treasures/${item.id}`}
|
||||
className="bg-white rounded-lg shadow border border-gray-300 overflow-hidden hover:scale-105 transition-all relative"
|
||||
>
|
||||
<LazyImage
|
||||
lazySrc={pb.files.getUrl(item, item.image, { thumb: "32x48" })}
|
||||
src={pb.files.getUrl(item, item.image, { thumb: "256x384" })}
|
||||
className="w-full aspect-[0.8] object-cover"
|
||||
/>
|
||||
<div className="absolute bottom-2 left-2 px-3 py-1 rounded-md bg-black/20 backdrop-blur-sm z-[2]">
|
||||
<p className="text-white">{item.artistName}</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
{isLoading || isFetchingNextPage
|
||||
? [...Array(12)].map((_, idx) => (
|
||||
<Skeleton key={idx} className="aspect-[0.8]" />
|
||||
))
|
||||
: null}
|
||||
</div>
|
||||
|
||||
{hasNextPage && !isFetchingNextPage ? (
|
||||
<div className="flex justify-center mt-8">
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (!isFetchingNextPage) {
|
||||
fetchNextPage();
|
||||
}
|
||||
}}
|
||||
variant="solid"
|
||||
className="min-w-[200px]"
|
||||
>
|
||||
Load More
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(ArtworkListing);
|
||||
@ -1,16 +1,11 @@
|
||||
import pb from "@/utility/api";
|
||||
import { Howl } from "howler";
|
||||
import { useInfiniteQuery } from "react-query";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
||||
import playIcon from "@/assets/icons/play-outline.svg";
|
||||
import openingSfx from "@/assets/audio/VO_JA_Furina_Opening_Treasure_Chest_02.ogg";
|
||||
import ViewSheet from "./viewSheet";
|
||||
import LazyImage from "@/components/ui/LazyImage";
|
||||
import PageMetadata from "@/components/containers/PageMetadata";
|
||||
import { useMemo } from "react";
|
||||
import Button from "@/components/ui/Button";
|
||||
import { useBottomScrollListener } from "react-bottom-scroll-listener";
|
||||
import { Skeleton } from "@/components/ui/Skeleton";
|
||||
import ArtworkListing from "./ArtworkListing";
|
||||
import { useCallback } from "react";
|
||||
|
||||
const openingChestSfx = new Howl({
|
||||
src: openingSfx,
|
||||
@ -20,31 +15,15 @@ const openingChestSfx = new Howl({
|
||||
const ArtworksPage = () => {
|
||||
const { id: viewArtId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
|
||||
useInfiniteQuery({
|
||||
queryKey: ["artworks"],
|
||||
queryFn: ({ pageParam = 1 }) => {
|
||||
return pb
|
||||
.collection("artworks")
|
||||
.getList(pageParam, 12, { sort: "-created" });
|
||||
},
|
||||
getNextPageParam: (lastPage) =>
|
||||
lastPage.page < lastPage.totalPages ? lastPage.page + 1 : undefined,
|
||||
});
|
||||
useBottomScrollListener<HTMLDivElement>(
|
||||
() => {
|
||||
if (!isFetchingNextPage) {
|
||||
fetchNextPage();
|
||||
const goBack = useCallback(() => {
|
||||
if (location.key !== "default") {
|
||||
navigate(-1);
|
||||
} else {
|
||||
navigate("/treasures");
|
||||
}
|
||||
},
|
||||
{ offset: 100 }
|
||||
);
|
||||
|
||||
const items = useMemo(
|
||||
() => data?.pages.flatMap((i) => i.items) || [],
|
||||
[data]
|
||||
);
|
||||
}, [location, navigate]);
|
||||
|
||||
return (
|
||||
<div className="container py-16">
|
||||
@ -66,52 +45,9 @@ const ArtworksPage = () => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 mt-8">
|
||||
{items.map((item) => (
|
||||
<Link
|
||||
key={item.id}
|
||||
to={`/treasures/${item.id}`}
|
||||
className="bg-white rounded-lg shadow border border-gray-300 overflow-hidden hover:scale-105 transition-all relative"
|
||||
>
|
||||
<LazyImage
|
||||
lazySrc={pb.files.getUrl(item, item.image, { thumb: "32x48" })}
|
||||
src={pb.files.getUrl(item, item.image, { thumb: "256x384" })}
|
||||
className="w-full aspect-[0.8] object-cover"
|
||||
/>
|
||||
<div className="absolute bottom-2 left-2 px-3 py-1 rounded-md bg-black/20 backdrop-blur-sm">
|
||||
<p className="text-white">{item.artistName}</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
<ArtworkListing />
|
||||
|
||||
{isLoading || isFetchingNextPage
|
||||
? [...Array(12)].map((_, idx) => (
|
||||
<Skeleton key={idx} className="aspect-[0.8]" />
|
||||
))
|
||||
: null}
|
||||
</div>
|
||||
|
||||
{hasNextPage && !isFetchingNextPage ? (
|
||||
<div className="flex justify-center mt-8">
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (!isFetchingNextPage) {
|
||||
fetchNextPage();
|
||||
}
|
||||
}}
|
||||
variant="solid"
|
||||
className="min-w-[200px]"
|
||||
>
|
||||
Load More
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<ViewSheet
|
||||
isOpen={viewArtId != null}
|
||||
id={viewArtId}
|
||||
onClose={() => navigate("/treasures")}
|
||||
/>
|
||||
<ViewSheet isOpen={viewArtId != null} id={viewArtId} onClose={goBack} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -5,6 +5,8 @@ import loadingIllust from "@/assets/images/l9fsdoa2j7vb1.gif";
|
||||
import Badge from "@/components/ui/Badge";
|
||||
import Button from "@/components/ui/Button";
|
||||
import { ChevronLeft } from "lucide-react";
|
||||
import LazyImage from "@/components/ui/LazyImage";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
type Props = {
|
||||
id?: string | null;
|
||||
@ -12,13 +14,20 @@ type Props = {
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const ViewSheet = ({ id, isOpen, onClose }: Props) => {
|
||||
const ViewSheet = ({ id: viewId, isOpen, onClose }: Props) => {
|
||||
const [id, setId] = useState(viewId);
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ["artwork", id],
|
||||
queryFn: () => pb.collection("artworks").getOne(id || ""),
|
||||
enabled: !!id,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (viewId) {
|
||||
setId(viewId);
|
||||
}
|
||||
}, [viewId, setId]);
|
||||
|
||||
return (
|
||||
<Sheet
|
||||
isOpen={isOpen}
|
||||
@ -45,14 +54,24 @@ const ViewSheet = ({ id, isOpen, onClose }: Props) => {
|
||||
<div className="flex flex-col md:flex-row md:h-full">
|
||||
<div className="flex-1 bg-gray-50 flex items-center justify-center">
|
||||
<a href={data.srcUrl} target="_blank" className="w-full h-full">
|
||||
<img
|
||||
<LazyImage
|
||||
lazySrc={pb.files.getUrl(data, data.image, { thumb: "32x48" })}
|
||||
src={pb.files.getUrl(data, data.image)}
|
||||
className="w-full h-full object-contain"
|
||||
containerClassName="w-full h-full"
|
||||
placeholderClassName="scale-x-110 -translate-x-10"
|
||||
placeholder={
|
||||
<div className="absolute z-10 inset-0 flex items-center justify-center">
|
||||
<p className="text-center bg-white py-1 px-2 rounded animate-bounce">
|
||||
Loading...
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="md:w-1/3 border-t md:border-l md:border-t-0 py-4 md:pt-0 px-4 lg:px-8 overflow-y-auto">
|
||||
<div className="md:w-1/3 border-t md:border-t-0 py-4 md:pt-0 px-4 lg:px-8 overflow-y-auto">
|
||||
<Button className="flex pl-2 mb-6" onClick={onClose}>
|
||||
<ChevronLeft /> Back
|
||||
</Button>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user