Refactor Card component and update Cards layout

walnuts1018 · Jan 20, 2024 · 9920ec3 · 9920ec3
1 parent 536462f
commit 9920ec3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/app/components/Cards/Card.tsx b/src/app/components/Cards/Card.tsx
@@ -69,12 +69,20 @@ export function Card({
         className='-m-2'
       />
     ),
-    sizu: <Image src='/icons/sizu.jpg' alt='しずかなインターネット' width={35} height={35} className='-m-2' />,
+    sizu: (
+      <Image
+        src='/icons/sizu.jpg'
+        alt='しずかなインターネット'
+        width={35}
+        height={35}
+        className='-m-2'
+      />
+    ),
     none: <></>,
   }[icon || 'none']
 
   return (
-    <div className=' h-[13rem] w-[22rem] p-5 hover:scale-105 duration-200 transition-all active:scale-100 font-Noto'>
+    <div className=' h-[11rem] w-[20rem] hover:scale-105 duration-200 transition-all active:scale-100 font-Noto'>
       <Link
         href={href}
         className='flex justify-center items-center h-full rounded-2xl relative bg-[#f6f7fa] cursor-pointer active:bg-[#e2e2e2] duration-200 transition-all'

diff --git a/src/app/components/Cards/Cards.tsx b/src/app/components/Cards/Cards.tsx
@@ -11,7 +11,7 @@ import {
 export default function Cards({ className }: { className?: string }) {
   return (
     <div className={className}>
-      <div className='flex flex-wrap justify-center'>
+      <div className='flex flex-wrap justify-center gap-8'>
         <Card
           title='walnuts1018/infra'
           description='Kubernetesのインフラ構成を管理するリポジトリです。'