feat: Settings screen for org

fix: ProjectSearchBarDialog (search small screen) Suggestions once (#223 )
Refactor the rendering logic of the suggestion list in `ProjectSearchBarDialog` component. This change simplifies the conditional rendering by restructuring the JSX to be more readable and maintainable. Now, the 'Suggestions' label is rendered once if there are items, and the items are mapped afterward. ---
2024-06-24 22:55:42 +00:00 · 2024-06-24 18:54:32 -04:00 · 2024-06-24 18:51:31 -04:00 · 2024-06-24 18:48:32 -04:00
3 changed files with 46 additions and 22 deletions
@@ -62,7 +62,7 @@ export const ProjectSearchBar = ({ onChange }: ProjectSearchBarProps) => {
    <div className="relative w-full lg:w-fit">
      <SearchBar {...getInputProps()} />
      <div
-        {...getMenuProps()}
+        {...getMenuProps({}, { suppressRefError: true })}
        className={cn(
          'flex flex-col shadow-dropdown rounded-xl bg-surface-card absolute w-[459px] max-h-52 overflow-y-auto px-2 py-2 gap-1 z-50',
          { hidden: !inputValue || !isOpen },
@@ -80,7 +80,7 @@ export const ProjectSearchBarDialog = ({
          <div className="h-full flex flex-col fixed top-0 inset-0">
            <div className="py-2.5 px-4 flex items-center justify-between border-b border-border-separator/[0.06]">
              <Input
-                {...getInputProps()}
+                {...getInputProps({}, { suppressRefError: true })}
                leftIcon={<SearchIcon />}
                placeholder="Search"
                appearance="borderless"
@@ -91,23 +91,33 @@ export const ProjectSearchBarDialog = ({
              </Button>
            </div>
            {/* Content */}
-            <div className="flex flex-col gap-1 px-2 py-2" {...getMenuProps()}>
-              {items.length > 0
-                ? items.map((item, index) => (
-                    <>
-                      <div className="px-2 py-2">
-                        <p className="text-elements-mid-em text-xs font-medium">
-                          Suggestions
-                        </p>
-                      </div>
-                      <ProjectSearchBarItem
-                        key={item.id}
-                        item={item}
-                        {...getItemProps({ item, index })}
-                      />
-                    </>
-                  ))
-                : inputValue && <ProjectSearchBarEmpty />}
+            <div
+              className="flex flex-col gap-1 px-2 py-2"
+              {...getMenuProps(
+                {},
+                {
+                  suppressRefError: true,
+                },
+              )}
+            >
+              {items.length > 0 ? (
+                <>
+                  <div className="px-2 py-2">
+                    <p className="text-elements-mid-em text-xs font-medium">
+                      Suggestions
+                    </p>
+                  </div>
+                  {items.map((item, index) => (
+                    <ProjectSearchBarItem
+                      key={item.id}
+                      item={item}
+                      {...getItemProps({ item, index })}
+                    />
+                  ))}
+                </>
+              ) : (
+                inputValue && <ProjectSearchBarEmpty />
+              )}
            </div>
          </div>
        </Dialog.Content>
@@ -1,5 +1,19 @@
-const Settings = () => {
-  return <div className="p-5">Settings page</div>;
-};
+import { Heading } from 'components/shared/Heading';

+const Settings = () => {
+  return (
+    <section className="px-4 md:px-6 py-6 flex flex-col gap-6">
+      {/* Header */}
+      <div className="flex items-center">
+        <div className="grow">
+          <div className="flex gap-4 items-center">
+            <Heading as="h2" className="text-[24px]">
+              Settings
+            </Heading>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
 export default Settings;
Author	SHA1	Message	Date
Vivian Phung	b658cde184	feat: `Settings` screen for org	2024-06-24 22:55:42 +00:00
Vivian Phung	4a78eb13f6	fix: `ProjectSearchBarDialog` (search small screen) `Suggestions` once (#223 ) Refactor the rendering logic of the suggestion list in `ProjectSearchBarDialog` component. This change simplifies the conditional rendering by restructuring the JSX to be more readable and maintainable. Now, the 'Suggestions' label is rendered once if there are items, and the items are mapped afterward. ---	2024-06-24 18:54:32 -04:00
Vivian Phung	41bcb2e7d0	fix: ProjectSearchBarDialog `suppressRefError` (#222 ) This PR resolves issues with the Project Search Bar component where `getMenuProps` was causing reference errors. By adding `suppressRefError: true` to `getMenuProps` in both `ProjectSearchBar` and `ProjectSearchBarDialog`, the warnings are suppressed. ---	2024-06-24 18:51:31 -04:00
Vivian Phung	f981f1a3f6	fix(ProjectSearchBarDialog): `getMenuProps` error (#221 ) - Replaced `useDebounce` with `useDebounceValue` for better type inference and simplicity - Added `getMenuProps` to `useCombobox` to support better accessibility and usability - Minor style tweak to improve `ProjectSearch` header hover effect - Created Storybook stories for the `ProjectSearchBar` component ---	2024-06-24 18:48:32 -04:00