style: [Contracts #415] - tabs switch dropdown

code4romania · Sep 26, 2024 · 5556808 · 5556808
1 parent 924236e
commit 5556808
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/frontend/src/components/Select.tsx b/frontend/src/components/Select.tsx
@@ -22,6 +22,7 @@ export interface SelectProps<T> {
   helper?: ReactNode;
   minWidth?: boolean;
   allowDeselect?: boolean;
+  optionsClassName?: string;
 }
 
 const Select = <T extends React.Key>({
@@ -33,6 +34,7 @@ const Select = <T extends React.Key>({
   helper,
   minWidth,
   allowDeselect = false,
+  optionsClassName,
 }: SelectProps<T>) => {
   const handleChange = (item: SelectItem<T>) => {
     if (allowDeselect && selected && item?.key === selected.key) {
@@ -74,7 +76,9 @@ const Select = <T extends React.Key>({
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <Listbox.Options className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 sm:text-sm lg:text-base text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
+              <Listbox.Options
+                className={`absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 sm:text-sm lg:text-base text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none ${optionsClassName}`}
+              >
                 {(options.length === 0 || !options) && (
                   <Listbox.Option
                     className={

diff --git a/frontend/src/components/Tabs.tsx b/frontend/src/components/Tabs.tsx
@@ -6,9 +6,16 @@ interface TabsProps<T> {
   children: ReactNode;
   defaultTab?: SelectItem<T>;
   onClick: (id: T) => void;
+  selectClassName?: string;
 }
 
-const Tabs = <T extends React.Key>({ children, tabs, onClick, defaultTab }: TabsProps<T>) => {
+const Tabs = <T extends React.Key>({
+  children,
+  tabs,
+  onClick,
+  defaultTab,
+  selectClassName,
+}: TabsProps<T>) => {
   const [activeTab, setActiveTab] = useState<SelectItem<T>>(defaultTab || tabs[0]);
 
   const onTabClick = (selected: SelectItem<T> | undefined): void => {
@@ -33,17 +40,23 @@ const Tabs = <T extends React.Key>({ children, tabs, onClick, defaultTab }: Tabs
             key={tab.key}
             aria-label={tab.value}
             onClick={onTabClick.bind(null, tab)}
-            className={`${activeTab?.key === tab.key
-              ? 'bg-yellow-500/[0.5]'
-              : 'font-roboto hover:bg-yellow-500/[0.5]'
-              } min-w-fit leading-5 text-cool-gray-800 hover:text-cool-gray-800 px-4 py-2 rounded-md active:bg-yellow-500`}
+            className={`${
+              activeTab?.key === tab.key
+                ? 'bg-yellow-500/[0.5]'
+                : 'font-roboto hover:bg-yellow-500/[0.5]'
+            } min-w-fit leading-5 text-cool-gray-800 hover:text-cool-gray-800 px-4 py-2 rounded-md active:bg-yellow-500`}
           >
             {tab.value}
           </a>
         ))}
       </nav>
       <div className="lg:hidden">
-        <Select options={tabs} onChange={onTabClick} selected={activeTab} />
+        <Select
+          options={tabs}
+          onChange={onTabClick}
+          selected={activeTab}
+          optionsClassName={selectClassName}
+        />
       </div>
       {children}
     </div>

diff --git a/frontend/src/pages/DocumentContracts.tsx b/frontend/src/pages/DocumentContracts.tsx
@@ -62,6 +62,7 @@ export const DocumentContracts = () => {
           ]}
           onClick={onTabClick}
           defaultTab={activeTab}
+          selectClassName="max-w-[37rem]"
         >
           <p className="text-cool-gray-500">{t('description')}</p>
           <Outlet />