Merge pull request #491 from masonmcelvain/tailwind-2

Tailwind 2
masonmcelvain · Nov 23, 2023 · 1dd7244 · 1dd7244
2 parents 744a5d7 + 4378909
commit 1dd7244
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 49 deletions.
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -1,4 +1,3 @@
-import { Button, Text, useBoolean, VStack } from "@chakra-ui/react";
 import { LinkData } from "@models/link-state";
 import * as React from "react";
 import { useDrag } from "react-dnd";
@@ -19,7 +18,6 @@ type CardProps = {
 export function Card({ linkData, isInEditMode, onClick }: CardProps) {
    const { id, name, url } = linkData;
    const item: CardDragItem = { id };
-   const [isMouseOver, setIsMouseOver] = useBoolean();
    const [{ isDragEventInProgress }, drag] = useDrag(
       () => ({
          type: DragItemTypes.CARD,
@@ -32,52 +30,29 @@ export function Card({ linkData, isInEditMode, onClick }: CardProps) {
       [id],
    );
 
-   const conditionalButtonProps = isDragEventInProgress
-      ? {
-           _hover: {},
-           _active: {},
-           _focus: {},
-        }
-      : {};
-
+   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]";
+   const dragTruncate = isDragEventInProgress
+      ? ""
+      : "group-hover:overflow-visible group-hover:whitespace-normal";
    return (
-      <Button
-         pos="absolute"
-         top={0}
-         as="a"
-         target="_self"
-         href={url.toString()}
-         onClick={onClick}
-         variant="ghost"
-         w="92%"
-         minH="92%"
-         h="max-content"
-         pt={4}
-         px={1}
-         display="flex"
-         flexDir="column"
-         alignItems="center"
-         justifyContent="flex-start"
-         gridRowGap={2}
-         onMouseEnter={setIsMouseOver.on}
-         onMouseLeave={setIsMouseOver.off}
-         disabled={isInEditMode}
+      <a
          ref={drag}
-         transform="translate(0, 0)" // Prevents React DnD background color bug
-         {...conditionalButtonProps}
+         className={`group absolute flex h-max min-h-[92%] w-11/12 translate-x-0 translate-y-0 cursor-pointer items-center justify-start rounded-md px-1 pt-4 transition duration-150 ${dragPseudo}`}
+         tabIndex={0}
+         onClick={onClick}
+         aria-disabled={isInEditMode}
+         href={url}
       >
-         <VStack w="full">
+         <div className="flex w-full flex-col items-center justify-center space-y-2">
             <CardImage linkData={linkData} />
-            <Text
-               align="center"
-               fontSize="sm"
-               maxW="full"
-               whiteSpace="normal"
-               isTruncated={!isMouseOver}
+            <p
+               className={`max-w-full truncate text-center text-sm ${dragTruncate}`}
             >
                {name}
-            </Text>
-         </VStack>
-      </Button>
+            </p>
+         </div>
+      </a>
    );
 }
diff --git a/src/components/CardImage.tsx b/src/components/CardImage.tsx
@@ -1,16 +1,15 @@
 import * as React from "react";
-import { Icon, Image } from "@chakra-ui/react";
+import { Image } from "react-feather";
 import { LinkData } from "@models/link-state";
-import { Image as FeatherImageIcon } from "react-feather";
 
 type CardImageProps = {
    linkData: LinkData;
 };
 export default function CardImage({ linkData }: CardImageProps) {
    const { name, imageUrl } = linkData;
    return imageUrl ? (
-      <Image src={imageUrl} alt={name} w={8} />
+      <img src={imageUrl} alt={name} className="w-8" />
    ) : (
-      <Icon as={FeatherImageIcon} w={8} h={8} opacity="0.5" />
+      <Image className="h-8 w-8 opacity-50" />
    );
 }
diff --git a/src/components/Cell.tsx b/src/components/Cell.tsx
@@ -45,15 +45,15 @@ export default function Cell({
 
    const onClick = React.useCallback(
       (event: React.MouseEvent | KeyboardEvent) => {
-         if (!link?.url) return;
+         if (isInEditMode || !link?.url) return;
          if (event.ctrlKey) {
             event.preventDefault();
             openInNewTab(link.url);
          } else {
             navigateCurrentTab(link.url);
          }
       },
-      [link?.url],
+      [isInEditMode, link?.url],
    );
    const onKeyDown = React.useCallback(
       (event: KeyboardEvent) => {