Update list-form.tsx

Author: jnsdls

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx

@@ -1,6 +1,7 @@
 import { Alert, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
 import { useDashboardOwnedNFTs } from "@3rdweb-sdk/react/hooks/useDashboardOwnedNFTs";
 import { useWalletNFTs } from "@3rdweb-sdk/react/hooks/useWalletNFTs";
 import {
@@ -540,7 +541,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
                     >
                       <div
                         className={cn(
-                          "rounded-lg overflow-hidden cursor-pointer",
+                          "cursor-pointer overflow-hidden rounded-lg",
                           isSelected(nft) &&
                             "outline outline-3 outline-purple-500",
                         )}
@@ -549,6 +550,17 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
                             ? form.setValue("selected", undefined)
                             : form.setValue("selected", nft)
                         }
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            isSelected(nft)
+                              ? form.setValue("selected", undefined)
+                              : form.setValue("selected", nft);
+                          }
+                        }}
+                        tabIndex={0}
+                        role="button"
+                        aria-pressed={isSelected(nft)}
                       >
                         <NFTMediaWithEmptyState
                           metadata={nft.metadata}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils";
 import { Flex } from "@chakra-ui/react";
 import { CurrencySelector } from "components/shared/CurrencySelector";
 import { NATIVE_TOKEN_ADDRESS } from "thirdweb";
@@ -36,7 +37,7 @@ export const ClaimPriceInput = (props: {
       }
     >
       <Flex gap={2} flexDir={{ base: "column", md: "row" }}>
-        <div className="min-w-[70px] w-full md:w-1/2">
+        <div className="w-full min-w-[70px] md:w-1/2">
           <PriceInput
             w="full"
             value={field.price?.toString() || ""}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx

@@ -32,15 +32,7 @@ export const DepositNative: React.FC<DepositNativeProps> = ({
   const v5Chain = useV5DashboardChain(chain.chainId);
 
   return (
-    <Card
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        gap: 16,
-        alignItems: "center",
-      }}
-      maxW={{ base: "100%", md: "49%" }}
-    >
+    <Card className="flex max-w-full flex-row items-center gap-4 md:max-w-49%">
       <Input
         placeholder={`Amount in ${symbol}. ex: 0.001`}
         onChange={handleChange}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/webhooks-table.tsx

@@ -101,7 +101,7 @@ const columns = [
           bg="transparent"
           boxShadow="none"
           label={
-            <Card bgColor="backgroundHighlight">
+            <Card className="bg-backgroundHighlight">
               <Text>{format(date, "PP pp z")}</Text>
             </Card>
           }

apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx

@@ -368,19 +368,7 @@ export const InteractiveAbiFunction: React.FC<InteractiveAbiFunctionProps> = (
 
   return (
     <FormProvider {...form}>
-      <Card
-        gridColumn={{ base: "span 12", md: "span 9" }}
-        borderRadius="none"
-        bg="transparent"
-        border="none"
-        as={Flex}
-        flexDirection="column"
-        gap={4}
-        boxShadow="none"
-        flexGrow={1}
-        w="100%"
-        p={0}
-      >
+      <Card className="flex w-full flex-grow grid-cols-12 flex-col gap-4 rounded-none border-none bg-transparent p-0 shadow-none md:grid-cols-9">
         <Flex
           position="relative"
           w="100%"

apps/dashboard/src/core-ui/batch-upload/batch-table.tsx

@@ -1,7 +1,6 @@
 import { CodeClient } from "@/components/ui/code/code.client";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import {
-  type BoxProps,
   Flex,
   IconButton,
   Image,
@@ -28,6 +27,7 @@ import { useMemo } from "react";
 import { type Column, usePagination, useTable } from "react-table";
 import type { NFTInput } from "thirdweb/utils";
 import { useThirdwebClient } from "../../@/constants/thirdweb.client";
+import { cn } from "../../@/lib/utils";
 
 const FileImage: React.FC<ImageProps> = ({ src, ...props }) => {
   const client = useThirdwebClient();
@@ -40,17 +40,36 @@ const FileImage: React.FC<ImageProps> = ({ src, ...props }) => {
 };
 
 const FileVideo: React.FC<
-  BoxProps &
-    Omit<React.ComponentProps<"video">, "ref" | "src"> & { src: string | File }
-> = ({ src, ...props }) => {
+  React.VideoHTMLAttributes<HTMLVideoElement> & { src: string | File }
+> = ({
+  src,
+  className = "",
+  autoPlay,
+  playsInline,
+  muted,
+  loop,
+  ...videoProps
+}) => {
   const client = useThirdwebClient();
   const video = useImageFileOrUrl(
     typeof src === "string" && src.startsWith("ipfs://")
       ? replaceIpfsUrl(src, client)
       : src,
   );
-  return <video {...props} src={video} />;
+
+  return (
+    <video
+      src={video}
+      autoPlay={autoPlay}
+      playsInline={playsInline}
+      muted={muted}
+      loop={loop}
+      className={cn("h-24 w-24 flex-shrink-0 object-contain", className)}
+      {...videoProps}
+    />
+  );
 };
+
 interface BatchTableProps {
   data: NFTInput[];
   portalRef: React.RefObject<HTMLDivElement | null>;
@@ -89,16 +108,7 @@ export const BatchTable: React.FC<BatchTableProps> = ({
         Header: "Animation Url",
         accessor: (row) => row.animation_url,
         Cell: ({ cell: { value } }: { cell: { value?: string } }) => (
-          <FileVideo
-            flexShrink={0}
-            boxSize={24}
-            objectFit="contain"
-            src={value || ""}
-            autoPlay
-            playsInline
-            muted
-            loop
-          />
+          <FileVideo src={value || ""} autoPlay playsInline muted loop />
         ),
       },
       { Header: "Name", accessor: (row) => row.name },

apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx

@@ -24,13 +24,12 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
   disabledText,
   infoText,
   className,
-  ...stackProps
 }) => {
   return (
     <Tooltip
       label={
         disabled && (
-          <Card bgColor="backgroundHighlight">
+          <Card className="bg-backgroundHighlight">
             <Text>{disabledText}</Text>
           </Card>
         )
@@ -42,16 +41,13 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
     >
       <Card
         className={cn(
-          "flex flex-col gap-2 rounded-md p-5",
+          "flex flex-col gap-2 rounded-md p-5 md:w-[350px]",
           disabled
-            ? "pointer-events-none cursor-not-allowed"
+            ? "pointer-events-none cursor-not-allowed bg-backgroundHighlight"
             : "cursor-pointer",
+          isActive && "border-primary-500",
           className,
         )}
-        width={{ base: "inherit", md: "350px" }}
-        borderColor={isActive ? "primary.500" : undefined}
-        bgColor={disabled ? "backgroundHighlight" : undefined}
-        {...stackProps}
         onClick={onClick}
       >
         <Flex flexDirection="row" justifyContent="space-between">
@@ -89,7 +85,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
                 p={0}
                 shouldWrapChildren
                 label={
-                  <Card bgColor="backgroundHighlight">
+                  <Card className="bg-backgroundHighlight">
                     <Text>{infoText}</Text>
                   </Card>
                 }

apps/dashboard/src/tw-components/card.tsx

@@ -26,7 +26,7 @@ export const Card: React.FC<CardProps> = ({
         style={{ padding: outlineBorder.width }}
       >
         <div
-          className="absolute inset-0 -z-10"
+          className="-z-10 absolute inset-0"
           style={{ background: outlineBorder.gradient }}
         />
         <div className={baseClasses} {...props}>