[Dashboard] migrate external links form

Author: jnsdls

apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx

@@ -1,7 +1,7 @@
+import { Button } from "@/components/ui/button";
 import { PlusIcon } from "lucide-react";
 import { useEffect } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
-import { Button, Heading, Text } from "tw-components";
 import { ExternalLinksInput } from "./external-links-input";
 
 export const ExternalLinksFieldset = () => {
@@ -29,8 +29,10 @@ export const ExternalLinksFieldset = () => {
   return (
     <fieldset className="flex flex-col gap-8">
       <div className="flex flex-col gap-2">
-        <Heading size="title.md">Resources</Heading>
-        <Text>Provide links to docs, usage guides etc. for the contract.</Text>
+        <h3 className="font-semibold text-xl tracking-tight">Resources</h3>
+        <p className="text-muted-foreground">
+          Provide links to docs, usage guides etc. for the contract.
+        </p>
       </div>
       <div className="flex flex-col gap-4">
         {fields.map((item, index) => (
@@ -40,16 +42,16 @@ export const ExternalLinksFieldset = () => {
           <Button
             type="button"
             size="sm"
-            colorScheme="primary"
-            borderRadius="md"
-            leftIcon={<PlusIcon className="size-5" />}
+            variant="outline"
+            className="gap-2"
             onClick={() =>
               append({
                 name: "",
                 url: "",
               })
             }
           >
+            <PlusIcon className="size-5" />
             Add Resource
           </Button>
         </div>

apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsx

@@ -1,13 +1,9 @@
-import {
-  Divider,
-  Flex,
-  FormControl,
-  IconButton,
-  Input,
-} from "@chakra-ui/react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
 import { TrashIcon } from "lucide-react";
 import { useFormContext } from "react-hook-form";
-import { FormErrorMessage, FormLabel } from "tw-components";
 
 interface ExternalLinksInputProps {
   index: number;
@@ -21,38 +17,35 @@ export const ExternalLinksInput: React.FC<ExternalLinksInputProps> = ({
   const form = useFormContext();
 
   return (
-    <Flex flexDir="column" gap={2}>
-      <Flex
-        w="full"
-        gap={{ base: 4, md: 2 }}
-        flexDir={{ base: "column", md: "row" }}
-      >
-        <FormControl
-          as={Flex}
-          flexDir="column"
-          gap={1}
-          isInvalid={
-            !!form.getFieldState(`externalLinks.${index}.name`, form.formState)
-              .error
-          }
-        >
-          <FormLabel textTransform="capitalize">Resource Name</FormLabel>
+    <div className="flex flex-col gap-2">
+      <div className="flex w-full flex-col gap-4 md:flex-row md:gap-2">
+        <div className="flex flex-1 flex-col gap-1">
+          <Label htmlFor={`externalLinks.${index}.name`} className="capitalize">
+            Resource Name
+          </Label>
           <Input
+            id={`externalLinks.${index}.name`}
             placeholder="Resource name"
             {...form.register(`externalLinks.${index}.name`)}
           />
-        </FormControl>
-        <FormControl
-          as={Flex}
-          flexDir="column"
-          gap={1}
-          isInvalid={
-            !!form.getFieldState(`externalLinks.${index}.url`, form.formState)
-              .error
-          }
-        >
-          <FormLabel textTransform="capitalize">Link</FormLabel>
+          {form.getFieldState(`externalLinks.${index}.name`, form.formState)
+            .error?.message && (
+            <p className="text-destructive-text text-sm">
+              {
+                form.getFieldState(
+                  `externalLinks.${index}.name`,
+                  form.formState,
+                ).error?.message
+              }
+            </p>
+          )}
+        </div>
+        <div className="flex flex-1 flex-col gap-1">
+          <Label htmlFor={`externalLinks.${index}.url`} className="capitalize">
+            Link
+          </Label>
           <Input
+            id={`externalLinks.${index}.url`}
             placeholder="Provide URL to the resource page"
             {...form.register(`externalLinks.${index}.url`, {
               required: true,
@@ -64,21 +57,28 @@ export const ExternalLinksInput: React.FC<ExternalLinksInputProps> = ({
               },
             })}
           />
-          <FormErrorMessage>
-            {
-              form.getFieldState(`externalLinks.${index}.url`, form.formState)
-                .error?.message
-            }
-          </FormErrorMessage>
-        </FormControl>
-        <IconButton
-          icon={<TrashIcon className="size-5" />}
+          {form.getFieldState(`externalLinks.${index}.url`, form.formState)
+            .error?.message && (
+            <p className="text-destructive-text text-sm">
+              {
+                form.getFieldState(`externalLinks.${index}.url`, form.formState)
+                  .error?.message
+              }
+            </p>
+          )}
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
           aria-label="Remove row"
           onClick={() => remove(index)}
-          alignSelf="end"
-        />
-      </Flex>
-      <Divider />
-    </Flex>
+          className="self-end"
+        >
+          <TrashIcon className="size-5" />
+          <span className="sr-only">Remove row</span>
+        </Button>
+      </div>
+      <Separator />
+    </div>
   );
 };