diff --git a/packages/fakeyou.com/src/components/common/Tabs/Tabs.tsx b/packages/fakeyou.com/src/components/common/Tabs/Tabs.tsx index 92dc47d34b..57ed3a9b5b 100644 --- a/packages/fakeyou.com/src/components/common/Tabs/Tabs.tsx +++ b/packages/fakeyou.com/src/components/common/Tabs/Tabs.tsx @@ -10,6 +10,7 @@ interface TabProps { label: string; content?: React.ReactNode; icon?: IconDefinition; + padding?: boolean; } interface TabsProps { @@ -18,6 +19,7 @@ interface TabsProps { interface TabContentProps { children: React.ReactNode; + padding?: boolean; } function Tab({ to, label, icon, onClick }: TabProps & { onClick: () => void }) { @@ -36,14 +38,15 @@ function Tab({ to, label, icon, onClick }: TabProps & { onClick: () => void }) { ); } -function TabContent({ children }: TabContentProps) { - return
{children}
; +function TabContent({ children, padding }: TabContentProps) { + const paddingClasses = padding ? "p-3 py-4 p-md-4" : ""; + return
{children}
; } function Tabs({ tabs }: TabsProps) { const location = useLocation(); const currentPath = location.pathname; - const initialTab = tabs.find((tab) => tab.to === currentPath) || tabs[0]; + const initialTab = tabs.find(tab => tab.to === currentPath) || tabs[0]; const [activeTab, setActiveTab] = useState(initialTab.to); const [fade, setFade] = useSpring(() => ({ @@ -68,10 +71,12 @@ function Tabs({ tabs }: TabsProps) { setTimeout(() => setActiveTab(tabTo), 50); }; + const activeTabProps = tabs.find(tab => tab.to === activeTab); + return (