feat: add preview to icon picker (#914)

apps/nextjs/src/components/icons/picker/icon-picker.tsx

@@ -16,6 +16,7 @@ interface IconPickerProps {
 export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: IconPickerProps) => {
   const [value, setValue] = useState<string>(initialValue ?? "");
   const [search, setSearch] = useState(initialValue ?? "");
+  const [previewUrl, setPreviewUrl] = useState<string | null>(initialValue ?? null);
 
   const t = useScopedI18n("common");
 
@@ -52,6 +53,7 @@ export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: I
     <Combobox
       onOptionSubmit={(value) => {
         setValue(value);
+        setPreviewUrl(value);
         setSearch(value);
         onChange(value);
         combobox.closeDropdown();
@@ -62,12 +64,15 @@ export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: I
       <Combobox.Target>
         <InputBase
           rightSection={<Combobox.Chevron />}
+          // eslint-disable-next-line @next/next/no-img-element
+          leftSection={previewUrl ? <img src={previewUrl} alt="" style={{ width: 20, height: 20 }} /> : null}
           value={search}
           onChange={(event) => {
             combobox.openDropdown();
             combobox.updateSelectedOptionIndex();
             setSearch(event.currentTarget.value);
             setValue(event.currentTarget.value);
+            setPreviewUrl(null);
             onChange(event.currentTarget.value);
           }}
           onClick={() => combobox.openDropdown()}
@@ -78,6 +83,7 @@ export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: I
           onBlur={(event) => {
             onBlur?.(event);
             combobox.closeDropdown();
+            setPreviewUrl(value);
             setSearch(value || "");
           }}
           rightSectionPointerEvents="none"