diff options
| author | A i j a Z <[email protected]> | 2023-09-24 20:01:48 +0530 |
|---|---|---|
| committer | GitHub <[email protected]> | 2023-09-24 21:31:48 +0700 |
| commit | e993aac0e730400124aa8a24d4bb0dd8c6d11208 (patch) | |
| tree | 96419c0dc61db46e8586ff19848b1750138e9ad9 /components | |
| parent | Create deploy.yml (diff) | |
| download | moopa-e993aac0e730400124aa8a24d4bb0dd8c6d11208.tar.xz moopa-e993aac0e730400124aa8a24d4bb0dd8c6d11208.zip | |
fixed character card (#78)v4.0.7
* fixed character card
* Update components/anime/charactersCard.js
Co-authored-by: Factiven <[email protected]>
* Update components/anime/charactersCard.js
Co-authored-by: Factiven <[email protected]>
* Update components/anime/charactersCard.js
Co-authored-by: Factiven <[email protected]>
---------
Co-authored-by: Factiven <[email protected]>
Diffstat (limited to 'components')
| -rw-r--r-- | components/anime/charactersCard.js | 45 |
1 files changed, 38 insertions, 7 deletions
diff --git a/components/anime/charactersCard.js b/components/anime/charactersCard.js index 409c4b7..abff2ba 100644 --- a/components/anime/charactersCard.js +++ b/components/anime/charactersCard.js @@ -7,8 +7,8 @@ export default function Characters({ info }) { const [showAll, setShowAll] = useState(false); return ( - <div className=""> - <div className="flex items-center justify-between lg:gap-3 z-40 px-3"> + <div> + <div className="flex items-center justify-between lg:gap-3 px-5 z-40 "> <h1 className="font-karla text-[20px] font-bold">Characters</h1> {info?.length > 6 && ( <div className="cursor-pointer font-karla" onClick={() => setShowAll(!showAll)}> @@ -16,11 +16,12 @@ export default function Characters({ info }) { </div> )} </div> - <div className="grid w-full grid-cols-1 gap-[12px] md:gap-4 md:grid-cols-3 md:pt-7 md:pb-5 px-3 md:px-5 pt-4"> - {info?.slice(0, showAll ? info.length : 6).map((item, index) => { + {/* for bigger device */} + <div className="hidden md:grid w-full grid-cols-1 gap-[10px] md:gap-4 md:grid-cols-3 md:pt-7 md:pb-5 px-3 md:px-5 pt-4"> + {info.slice(0, showAll ? info.length : 6).map((item, index) => { return <a key={index} className="md:hover:scale-[1.02] snap-start hover:shadow-lg scale-100 transition-transform duration-200 ease-out w-full cursor-default"> - <div className="text-gray-300 space-x-4 col-span-1 flex w-full h-24 bg-secondary rounded-md"> - <div className="relative h-full w-16"> + <div className="text-gray-300 space-x-4 col-span-1 flex w-full h-24 bg-secondary rounded-md overflow-hidden"> + <div className="relative h-full w-20"> <Image draggable={false} src={ @@ -34,7 +35,7 @@ export default function Characters({ info }) { item.node.name.full || "Character Image" } - className="object-cover rounded-l-md" + className="h-full object-cover" /> </div> <div className="py-2 flex flex-col justify-between"> @@ -45,6 +46,36 @@ export default function Characters({ info }) { </a> })} </div> + {/* for smaller devices */} + <div className="flex md:hidden h-full w-full select-none overflow-x-scroll overflow-y-hidden scrollbar-hide gap-4 pt-8 pb-4 px-5 z-30"> + {info.slice(0, showAll ? info.length : 6).map((item, index) => { + return <div key={index} className="flex flex-col gap-3 shrink-0 cursor-pointer"> + <a className="hover:scale-105 hover:shadow-lg duration-300 ease-out group relative"> + <div className="h-[190px] w-[135px] rounded-md z-30"> + <Image + draggable={false} + src={ + item.node.image.large || + item.node.image.medium + } + alt={ + item.node.name.userPreferred || + item.node.name.full || + "Character Image" + } + width={500} + height={300} + className="z-20 h-[190px] w-[135px] object-cover rounded-md brightness-90" + /> + </div> + </a> + <a className="w-[135px] lg:w-[185px] line-clamp-2"> + <h1 className="font-karla font-semibold text-[15px]">{item.node.name.full || item.node.name.userPreferred}</h1> + <h1 className="font-karla float-right italic text-[12px]">~{item.role}</h1> + </a> + </div> + })} + </div> </div> ); }
\ No newline at end of file |