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/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/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}>