khairul169/furina.id
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: view artwork full screen

Browse Source
This commit is contained in:
Khairul Hidayat 2024-01-10 16:26:14 +00:00
parent 2fa435a9ba
commit 05904267c5
2 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ui/Sheet.tsx
View File

@ -128,6 +128,7 @@ type SheetProps = React.ComponentProps<typeof SheetRoot> & {
title?: string; title?: string;
description?: string; description?: string;
position?: SheetContentProps["side"]; position?: SheetContentProps["side"];
className?: string;
}; };
const Sheet = ({ const Sheet = ({
@ -136,18 +137,19 @@ const Sheet = ({
description, description,
children, children,
position, position,
className,
...props ...props
}: SheetProps) => { }: SheetProps) => {
return ( return (
<SheetRoot open={isOpen} {...props}> <SheetRoot open={isOpen} {...props}>
<SheetContent side={position} className="rounded-t-2xl"> <SheetContent side={position} className={cn("rounded-t-2xl", className)}>
<SheetHeader> <SheetHeader>
{title ? <SheetTitle>{title}</SheetTitle> : null} {title ? <SheetTitle>{title}</SheetTitle> : null}
{description ? ( {description ? (
<SheetDescription>{description}</SheetDescription> <SheetDescription>{description}</SheetDescription>
) : null} ) : null}
</SheetHeader> </SheetHeader>
<div className="max-h-[90vh] overflow-y-auto">{children}</div> <div className="h-[calc(100vh-60px)] overflow-y-auto">{children}</div>
</SheetContent> </SheetContent>
</SheetRoot> </SheetRoot>
); );

15
src/pages/artworks/viewSheet.tsx
View File

@ -20,7 +20,12 @@ const ViewSheet = ({ modal }: Props) => {
}); });
return ( return (
<Sheet {...modal} title="View Item" position="bottom"> <Sheet
{...modal}
title="View Item"
position="bottom"
className="rounded-t-none max-h-auto h-screen"
>
{isLoading ? ( {isLoading ? (
<div className="min-h-[320px] flex flex-col items-center justify-center text-center"> <div className="min-h-[320px] flex flex-col items-center justify-center text-center">
<img src={loadingIllust} className="h-40 animate-bounce" /> <img src={loadingIllust} className="h-40 animate-bounce" />
@ -32,12 +37,12 @@ const ViewSheet = ({ modal }: Props) => {
<p className="mt-2">Cannot load item</p> <p className="mt-2">Cannot load item</p>
</div> </div>
) : ( ) : (
<div className="flex flex-col md:flex-row"> <div className="flex flex-col md:flex-row md:h-full">
<div className="flex-1 bg-gray-50"> <div className="flex-1 bg-gray-50 flex items-center justify-center">
<a href={data.srcUrl} target="_blank"> <a href={data.srcUrl} target="_blank" className="w-full h-full">
<img <img
src={pb.files.getUrl(data, data.image)} src={pb.files.getUrl(data, data.image)}
className="w-full max-h-[80vh] object-contain" className="w-full h-full object-contain"
/> />
</a> </a>
</div> </div>