From 1a85c2571690ba592ac5183d5eadaf9846fe532b Mon Sep 17 00:00:00 2001
From: Factiven <factiven.org@gmail.com>
Date: Mon, 25 Sep 2023 00:44:40 +0700
Subject: Update v4.1.0 (#79)

* Update v4.1.0

* Update pages/_app.js
---
 components/anime/charactersCard.js | 160 ++++++++++++++++++++-----------------
 1 file changed, 86 insertions(+), 74 deletions(-)

(limited to 'components/anime/charactersCard.js')

diff --git a/components/anime/charactersCard.js b/components/anime/charactersCard.js
index abff2ba..6c9197a 100644
--- a/components/anime/charactersCard.js
+++ b/components/anime/charactersCard.js
@@ -3,79 +3,91 @@ import Image from "next/image";
 import { useState } from "react";
 
 export default function Characters({ info }) {
+  const [showAll, setShowAll] = useState(false);
 
-    const [showAll, setShowAll] = useState(false);
-
-    return (
-        <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)}>
-                        {showAll ? "show less" : "show more"}
-                    </div>
-                )}
-            </div>
-            {/* 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 overflow-hidden">
-                            <div className="relative h-full w-20">
-                                <Image
-                                    draggable={false}
-                                    src={
-                                        item.node.image.large ||
-                                        item.node.image.medium
-                                    }
-                                    width={500}
-                                    height={300}
-                                    alt={
-                                        item.node.name.userPreferred ||
-                                        item.node.name.full ||
-                                        "Character Image"
-                                    }
-                                    className="h-full object-cover"
-                                />
-                            </div>
-                            <div className="py-2 flex flex-col justify-between">
-                                <p className="font-semibold">{item.node.name.full || item.node.name.userPreferred}</p>
-                                <p>{item.role}</p>
-                            </div>
-                        </div>
-                    </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>
-                })}
+  return (
+    <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)}
+          >
+            {showAll ? "show less" : "show more"}
+          </div>
+        )}
+      </div>
+      {/* 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 overflow-hidden">
+                <div className="relative h-full w-20">
+                  <Image
+                    draggable={false}
+                    src={item.node.image.large || item.node.image.medium}
+                    width={500}
+                    height={300}
+                    alt={
+                      item.node.name.userPreferred ||
+                      item.node.name.full ||
+                      "Character Image"
+                    }
+                    className="h-full object-cover"
+                  />
+                </div>
+                <div className="py-2 flex flex-col justify-between">
+                  <p className="font-semibold">
+                    {item.node.name.full || item.node.name.userPreferred}
+                  </p>
+                  <p>{item.role}</p>
+                </div>
+              </div>
+            </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>
-    );
-}
\ No newline at end of file
+          );
+        })}
+      </div>
+    </div>
+  );
+}
-- 
cgit v1.2.3