fix keys

src/components/CommandPalette.tsx

@@ -361,10 +361,10 @@ export const CommandPalette = (): JSX.Element => {
       <CommandInput placeholder="Type a command or search..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
-        {groups.map((group) => (
-          <CommandGroup heading={group.label}>
-            {group.commands.map((command) => (
-              <>
+        {groups.map((group, index) => (
+          <CommandGroup key={index} heading={group.label}>
+            {group.commands.map((command, index) => (
+              <div key={index}>
                 <CommandItem
                   onSelect={() => {
                     command.action && command.action();
@@ -375,14 +375,15 @@ export const CommandPalette = (): JSX.Element => {
                   {command.label}
                 </CommandItem>
                 {command.subItems &&
-                  command.subItems.map((subItem) => (
+                  command.subItems.map((subItem, index) => (
                     <SubItem
+                      key={index}
                       label={subItem.label}
                       icon={subItem.icon}
                       action={subItem.action}
                     />
                   ))}
-              </>
+              </div>
             ))}
           </CommandGroup>
         ))}

src/components/Dialog/NewDevice.tsx

@@ -55,13 +55,17 @@ export const NewDeviceDialog = ({
         <Tabs defaultValue="HTTP">
           <TabsList>
             {tabs.map((tab) => (
-              <TabsTrigger value={tab.label} disabled={tab.disabled}>
+              <TabsTrigger
+                key={tab.label}
+                value={tab.label}
+                disabled={tab.disabled}
+              >
                 {tab.label}
               </TabsTrigger>
             ))}
           </TabsList>
-          {tabs.map((tab) => (
-            <TabsContent value={tab.label}>
+          {tabs.map((tab, index) => (
+            <TabsContent key={index} value={tab.label}>
               {tab.disabled ? (
                 <p className="text-sm text-slate-500 dark:text-slate-400">
                   {tab.disabledMessage}

src/components/DynamicForm.tsx

@@ -92,14 +92,17 @@ export function DynamicForm<T extends FieldValues>({
       className="space-y-8 divide-y divide-gray-200"
       onChange={handleSubmit(onSubmit)}
     >
-      {fieldGroups.map((fieldGroup) => (
-        <div className="space-y-8 divide-y divide-gray-200 sm:space-y-5">
+      {fieldGroups.map((fieldGroup, index) => (
+        <div
+          key={index}
+          className="space-y-8 divide-y divide-gray-200 sm:space-y-5"
+        >
           <div>
             <H4 className="font-medium">{fieldGroup.label}</H4>
             <Subtle>{fieldGroup.description}</Subtle>
           </div>
 
-          {fieldGroup.fields.map((field) => {
+          {fieldGroup.fields.map((field, index) => {
             const fieldWrapperData: FieldWrapperProps = {
               label: field.label,
               description: field.description,
@@ -109,7 +112,7 @@ export function DynamicForm<T extends FieldValues>({
             switch (field.type) {
               case "text":
                 return (
-                  <FieldWrapper {...fieldWrapperData}>
+                  <FieldWrapper key={index} {...fieldWrapperData}>
                     <Input
                       disabled={fieldWrapperData.disabled}
                       {...register(field.name)}
@@ -118,7 +121,7 @@ export function DynamicForm<T extends FieldValues>({
                 );
               case "number":
                 return (
-                  <FieldWrapper {...fieldWrapperData}>
+                  <FieldWrapper key={index} {...fieldWrapperData}>
                     <Input
                       type="number"
                       disabled={fieldWrapperData.disabled}
@@ -128,7 +131,7 @@ export function DynamicForm<T extends FieldValues>({
                 );
               case "password":
                 return (
-                  <FieldWrapper {...fieldWrapperData}>
+                  <FieldWrapper key={index} {...fieldWrapperData}>
                     <Input
                       type="password"
                       disabled={fieldWrapperData.disabled}
@@ -138,7 +141,7 @@ export function DynamicForm<T extends FieldValues>({
                 );
               case "toggle":
                 return (
-                  <FieldWrapper {...fieldWrapperData}>
+                  <FieldWrapper key={index} {...fieldWrapperData}>
                     <Controller
                       name={field.name}
                       control={control}
@@ -160,7 +163,7 @@ export function DynamicForm<T extends FieldValues>({
                     )
                   : [];
                 return (
-                  <FieldWrapper {...fieldWrapperData}>
+                  <FieldWrapper key={index} {...fieldWrapperData}>
                     <Controller
                       name={field.name}
                       control={control}
@@ -198,7 +201,11 @@ export function DynamicForm<T extends FieldValues>({
                   </FieldWrapper>
                 );
               case "multiSelect":
-                return <FieldWrapper {...fieldWrapperData}>tmp</FieldWrapper>;
+                return (
+                  <FieldWrapper key={index} {...fieldWrapperData}>
+                    tmp
+                  </FieldWrapper>
+                );
             }
           })}
         </div>

src/components/PageLayout.tsx

@@ -24,8 +24,9 @@ export const PageLayout = ({
           <div className="flex w-full items-center">
             <span className="w-full text-lg font-medium">{title}</span>
             <div className="flex justify-end space-x-4">
-              {actions?.map((action) => (
+              {actions?.map((action, index) => (
                 <button
+                  key={index}
                   className="transition-all hover:text-accent"
                   onClick={action.onClick}
                 >

src/components/Sidebar.tsx

@@ -76,9 +76,9 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
       </div>
 
       <SidebarSection label="Navigation">
-        {pages.map((link) => (
+        {pages.map((link, index) => (
           <SidebarButton
-            key={link.page}
+            key={index}
             label={link.name}
             icon={link.icon}
             onClick={() => {