Use Tailwind in grid

src/components/Card.tsx

@@ -32,7 +32,7 @@ export function Card({ linkData, isInEditMode, onClick }: CardProps) {
 
    const dragPseudo = isDragEventInProgress
       ? ""
-      : "hover:bg-white hover:bg-opacity-10 focus-visible:outline-none focus-visible:ring focus-visible:ring-blue-500/50 active:bg-white active:bg-opacity-[.16] dark:hover:bg-[#EDF2F7] dark:active:bg-[#E2E8F0]";
+      : "hover:bg-chakra-hover focus-visible:outline-none focus-visible:ring focus-visible:ring-chakra-focus active:bg-chakra-active dark:hover:bg-chakra-hover-dark dark:active:bg-chakra-active-dark";
    const dragTruncate = isDragEventInProgress
       ? ""
       : "group-hover:overflow-visible group-hover:whitespace-normal";

src/components/Cell.tsx

@@ -1,4 +1,3 @@
-import { IconButton, Square, useBoolean, VStack } from "@chakra-ui/react";
 import { useLinkStore } from "@hooks/useLinkStore";
 import {
    getStorageKeyForLink,
@@ -15,14 +14,12 @@ import { openUpdateLinkModalForCellType } from "./Page";
 type CellProps = {
    index: number;
    isOverEmpty: boolean;
-   setIsOverEmpty: ReturnType<typeof useBoolean>[1];
+   setIsOverEmpty: (a: boolean) => void;
    isInEditMode: boolean;
    openUpdateLinkModal: openUpdateLinkModalForCellType;
    isLinkEditModalOpen: boolean;
 };
 
-const SIDE_LENGTH = 90;
-
 export default function Cell({
    index,
    isOverEmpty,
@@ -118,9 +115,9 @@ export default function Cell({
 
    React.useEffect(() => {
       if (isOver && !card) {
-         setIsOverEmpty.on();
+         setIsOverEmpty(true);
       } else if (!dragItem) {
-         setIsOverEmpty.off();
+         setIsOverEmpty(false);
       }
    }, [card, dragItem, isOver, setIsOverEmpty]);
 
@@ -137,38 +134,30 @@ export default function Cell({
    const shouldHideChildren = isOver || (isLastCellWithCard && isOverEmpty);
 
    return (
-      <Square
+      <div
          ref={drop}
-         pos="relative"
-         size={SIDE_LENGTH}
+         className="relative flex h-[90px] w-[90px] items-center justify-center"
          data-testid={isEmpty ? "empty-cell" : "non-empty-cell"}
       >
          {card && isInEditMode ? (
-            <VStack
-               pos="absolute"
-               top={0}
-               left={0}
-               zIndex="docked"
-               spacing="px"
-            >
-               <IconButton
-                  icon={<Edit2 size={16} />}
+            <div className="absolute left-0 top-0 z-10 flex flex-col items-center justify-center space-y-0.5">
+               <button
                   aria-label="Edit this link"
+                  className="relative inline-flex h-6 min-w-[1.5rem] select-none appearance-none items-center justify-center whitespace-nowrap rounded-md bg-transparent align-middle text-xs font-semibold leading-tight outline outline-2 outline-offset-2 outline-transparent transition duration-200 hover:bg-chakra-hover focus-visible:outline-none focus-visible:ring focus-visible:ring-chakra-focus active:bg-chakra-active dark:hover:bg-chakra-hover-dark dark:active:bg-chakra-active-dark"
                   onClick={() => openUpdateLinkModal(index)}
-                  variant="ghost"
-                  size="xs"
-               />
-               <IconButton
-                  icon={<X size={20} />}
+               >
+                  <Edit2 size={16} />
+               </button>
+               <button
                   aria-label="Delete this link"
+                  className="relative inline-flex h-6 min-w-[1.5rem] select-none appearance-none items-center justify-center whitespace-nowrap rounded-md bg-transparent align-middle text-xs font-semibold leading-tight text-red-300 outline outline-2 outline-offset-2 outline-transparent transition duration-200 hover:bg-red-300/10 focus-visible:outline-none focus-visible:ring focus-visible:ring-chakra-focus active:bg-red-300/20"
                   onClick={deleteChildCard}
-                  colorScheme="red"
-                  variant="ghost"
-                  size="xs"
-               />
-            </VStack>
+               >
+                  <X size={20} />
+               </button>
+            </div>
          ) : null}
          {shouldHideChildren ? null : card}
-      </Square>
+      </div>
    );
 }

src/components/Grid.tsx

@@ -1,4 +1,3 @@
-import { SimpleGrid, useBoolean } from "@chakra-ui/react";
 import { useLinkStore } from "@hooks/useLinkStore";
 import * as React from "react";
 import Cell from "./Cell";
@@ -18,7 +17,7 @@ export default function Grid({
    isLinkEditModalOpen,
 }: GridProps) {
    const linkKeys = useLinkStore((state) => state.linkKeys);
-   const [isOverEmpty, setIsOverEmpty] = useBoolean();
+   const [isOverEmpty, setIsOverEmpty] = React.useState(false);
 
    const length = React.useMemo(() => {
       const linkCount = linkKeys.length;
@@ -31,7 +30,7 @@ export default function Grid({
    }, [linkKeys.length]);
 
    return (
-      <SimpleGrid columns={COL_COUNT}>
+      <div className="grid grid-cols-3">
          {Array.from({ length }).map((_, i) => (
             <Cell
                key={i}
@@ -43,6 +42,6 @@ export default function Grid({
                isLinkEditModalOpen={isLinkEditModalOpen}
             />
          ))}
-      </SimpleGrid>
+      </div>
    );
 }

tailwind.config.js

@@ -2,7 +2,17 @@
 module.exports = {
    content: ["./src/**/*{.html,.ts,.tsx}"],
    theme: {
-      extend: {},
+      extend: {
+         backgroundColor: {
+            "chakra-active": "rgb(255,255,255,.16)",
+            "chakra-active-dark": "rgb(237,242,247,.16)",
+            "chakra-hover": "rgb(255,255,255,.1)",
+            "chakra-hover-dark": "rgb(237,242,247,.1)",
+         },
+         ringColor: {
+            "chakra-focus": "rgba(66,153,225,0.6)",
+         },
+      },
    },
    plugins: [],
 };