perf: 🎨 remove fragment imports, optimize templates

apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx

@@ -12,7 +12,6 @@ import {
   FormMessage,
   Input,
   RichInput,
-  Slider,
 } from "@reactive-resume/ui";
 import { AnimatePresence, motion } from "framer-motion";
 import { useForm } from "react-hook-form";
@@ -88,13 +87,13 @@ export const CustomSectionDialog = () => {
         />
 
         <FormField
-          name="url"
+          name="location"
           control={form.control}
           render={({ field }) => (
             <FormItem className="col-span-1">
-              <FormLabel>Website</FormLabel>
+              <FormLabel>Location</FormLabel>
               <FormControl>
-                <URLInput {...field} />
+                <Input {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -102,24 +101,13 @@ export const CustomSectionDialog = () => {
         />
 
         <FormField
-          name="level"
+          name="url"
           control={form.control}
           render={({ field }) => (
             <FormItem className="col-span-2">
-              <FormLabel>Level</FormLabel>
-              <FormControl className="py-2">
-                <div className="flex items-center gap-x-4">
-                  <Slider
-                    {...field}
-                    min={0}
-                    max={5}
-                    value={[field.value]}
-                    orientation="horizontal"
-                    onValueChange={(value) => field.onChange(value[0])}
-                  />
-
-                  <span className="text-base font-bold">{field.value}</span>
-                </div>
+              <FormLabel>Website</FormLabel>
+              <FormControl>
+                <URLInput {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>

apps/client/src/pages/builder/sidebars/left/sections/custom/section.tsx

@@ -16,7 +16,7 @@ type CustomFieldProps = {
 export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) => {
   const controls = useDragControls();
 
-  const handleChange = (key: "name" | "value", value: string) =>
+  const handleChange = (key: "icon" | "name" | "value", value: string) =>
     onChange({ ...field, [key]: value });
 
   return (
@@ -28,7 +28,7 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -50 }}
     >
-      <div className="flex items-end justify-between space-x-4">
+      <div className="flex items-end justify-between space-x-2">
         <Button
           size="icon"
           variant="ghost"
@@ -38,9 +38,15 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
           <DotsSixVertical />
         </Button>
 
+        <Input
+          placeholder="Icon"
+          value={field.icon}
+          className="!ml-0"
+          onChange={(event) => handleChange("icon", event.target.value)}
+        />
+
         <Input
           placeholder="Name"
-          className="!ml-2"
           value={field.name}
           onChange={(event) => handleChange("name", event.target.value)}
         />
@@ -54,7 +60,7 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
         <Button
           size="icon"
           variant="ghost"
-          className="!ml-2 shrink-0"
+          className="!ml-0 shrink-0"
           onClick={() => onRemove(field.id)}
         >
           <X />
@@ -73,7 +79,10 @@ export const CustomFieldsSection = ({ className }: Props) => {
   const customFields = useResumeStore((state) => state.resume.data.basics.customFields);
 
   const onAddCustomField = () => {
-    setValue("basics.customFields", [...customFields, { id: createId(), name: "", value: "" }]);
+    setValue("basics.customFields", [
+      ...customFields,
+      { id: createId(), icon: "", name: "", value: "" },
+    ]);
   };
 
   const onChangeCustomField = (field: ICustomField) => {