Rename variant

cultuurnet · Nov 7, 2024 · 0c56fc3 · 0c56fc3
1 parent 2a5d26f
commit 0c56fc3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/src/pages/search/index.page.tsx b/src/pages/search/index.page.tsx
@@ -1,6 +1,6 @@
 import getConfig from 'next/config';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { TabContent } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
@@ -12,7 +12,7 @@ import { useIsClient } from '@/hooks/useIsClient';
 import { useLegacyPath } from '@/hooks/useLegacyPath';
 import { Page } from '@/ui/Page';
 import { Stack } from '@/ui/Stack';
-import { Tabs, TabsCustomVariants } from '@/ui/Tabs';
+import { Tabs, TabsVariants } from '@/ui/Tabs';
 import { colors } from '@/ui/theme';
 import { getApplicationServerSideProps } from '@/utils/getApplicationServerSideProps';
 
@@ -61,7 +61,7 @@ const Search = () => {
               activeKey={tab}
               onSelect={handleSelectTab}
               activeBackgroundColor={`${udbMainDarkBlue}`}
-              customVariant={TabsCustomVariants.OUTLINED}
+              variant={TabsVariants.OUTLINED}
             >
               <Tabs.Tab
                 eventKey="events-places"
@@ -85,7 +85,22 @@ const Search = () => {
                 )}
               </Tabs.Tab>
               <Tabs.Tab eventKey="organizers" title={t('search.organizers')}>
-                {tab === 'organizers' && <div>Hello</div>}
+                {tab === 'organizers' && (
+                  <TabContent>
+                    <Stack flex={1}>
+                      {isClientSide && (
+                        <iframe
+                          height={
+                            iframeHeight
+                              ? `${iframeHeight}px`
+                              : `${window.innerHeight}`
+                          }
+                          src={legacyPath}
+                        ></iframe>
+                      )}
+                    </Stack>
+                  </TabContent>
+                )}
               </Tabs.Tab>
             </Tabs>
           )}

diff --git a/src/ui/Tabs.tsx b/src/ui/Tabs.tsx
@@ -14,22 +14,22 @@ import { colors, getValueFromTheme } from './theme';
 
 const getValue = getValueFromTheme(`tabs`);
 
-export const TabsCustomVariants = {
+export const TabsVariants = {
   DEFAULT: 'default',
   OUTLINED: 'outlined',
 } as const;
 
 type Props<T> = BoxProps &
-  TabsProps & {
+  Omit<TabsProps, 'variant'> & {
     activeBackgroundColor?: string;
-    customVariant?: Values<typeof TabsCustomVariants>;
+    variant?: Values<typeof TabsVariants>;
   };
 
 const Tabs = <T,>({
   activeKey,
   onSelect,
   activeBackgroundColor = 'white',
-  customVariant = TabsCustomVariants.DEFAULT,
+  variant = TabsVariants.DEFAULT,
   children: rawChildren,
   className,
   ...props
@@ -131,7 +131,7 @@ const Tabs = <T,>({
       <BootstrapTabs
         activeKey={activeKey}
         onSelect={onSelect}
-        css={TabStyles[customVariant]}
+        css={TabStyles[variant]}
       >
         {children}
       </BootstrapTabs>