From e993aac0e730400124aa8a24d4bb0dd8c6d11208 Mon Sep 17 00:00:00 2001
From: A i j a Z <72906651+Aijazmakerb@users.noreply.github.com>
Date: Sun, 24 Sep 2023 20:01:48 +0530
Subject: fixed character card (#78)

* fixed character card

* Update components/anime/charactersCard.js

Co-authored-by: Factiven <factiven.org@gmail.com>

* Update components/anime/charactersCard.js

Co-authored-by: Factiven <factiven.org@gmail.com>

* Update components/anime/charactersCard.js

Co-authored-by: Factiven <factiven.org@gmail.com>

---------

Co-authored-by: Factiven <factiven.org@gmail.com>
---
 components/anime/charactersCard.js | 45 ++++++++++++++++++++++++++++++++------
 1 file changed, 38 insertions(+), 7 deletions(-)

(limited to 'components')

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
-- 
cgit v1.2.3