dev
/
sudo-archive
mirror of https://github.com/sussy-code/smov.git
2
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update MediaCard.tsx

This commit is contained in:
Ivan Evans 2024-04-28 22:09:11 -06:00 committed by GitHub
parent 690ea3480c
commit 6a7ea0ea2f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/media/MediaCard.tsx
View File

@ -8,6 +8,7 @@ import { DotList } from "@/components/text/DotList";
import { Flare } from "@/components/utils/Flare";
import { MediaItem } from "@/utils/mediaTypes";
import { MediaBookmarkButton } from "./MediaBookmark";
import { IconPatch } from "../buttons/IconPatch";
import { Icons } from "../Icon";
@ -66,7 +67,7 @@ function MediaCardContent({
return (
<Flare.Base
className={`group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10 ${
className={`group -m-3 mb-2 rounded-xl bg-background-main transition-colors duration-100 focus:relative focus:z-10 ${
canLink ? "hover:bg-mediaCard-hoverBackground tabbable" : ""
}`}
tabIndex={canLink ? 0 : -1}
@ -81,13 +82,13 @@ function MediaCardContent({
})}
/>
<Flare.Child
className={`pointer-events-auto relative mb-2 p-[0.5em] transition-transform duration-300 ${
className={`pointer-events-auto relative mb-2 p-3 transition-transform duration-100 ${
canLink ? "group-hover:scale-95" : "opacity-60"
}`}
>
<div
className={classNames(
"relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-300",
"relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-100",
{
"group-hover:rounded-lg": canLink,
},
@ -141,14 +142,20 @@ function MediaCardContent({
</>
) : null}
{canLink ? (
<div className="absolute" onClick={(e) => e.preventDefault()}>
<MediaBookmarkButton media={media} />
</div>
) : null}
<div
className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-500 ${
className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-200 ${
closable ? "opacity-100" : "pointer-events-none opacity-0"
}`}
>
<IconPatch
clickable
className="text-2xl text-mediaCard-badgeText transition-transform hover:scale-110 duration-500"
className="text-2xl text-mediaCard-badgeText"
onClick={() => closable && onClose?.()}
icon={Icons.X}
/>