Skip to content

Commit

Permalink
[DEV-1577] Fix rendering of a single tab in a group of tabs (#804)
Browse files Browse the repository at this point in the history
* Fix rendering of a single tab in a group of tabs

* Add changeset
  • Loading branch information
marcobottaro authored Apr 3, 2024
1 parent 504daa8 commit e496be4
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 15 deletions.
5 changes: 5 additions & 0 deletions .changeset/twelve-eyes-vanish.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"nextjs-website": patch
---

Fix the rendering of a single tab in a group of tabs
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React, { ReactNode } from 'react';
import { useTheme } from '@mui/material';

type TabProps = {
children: ReactNode;
hidden: boolean;
};

const Tab = ({ children, hidden }: TabProps) => {
const { palette } = useTheme();

return (
<div
hidden={hidden}
style={{
border: `1px solid ${palette.divider}`,
borderTopRightRadius: 4,
borderBottomRightRadius: 4,
borderBottomLeftRadius: 4,
padding: 16,
}}
>
{children}
</div>
);
};

export default Tab;
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import MuiTab from '@mui/material/Tab';
import { TabsProps } from 'gitbook-docs/markdoc/schema/tabs';
import React, { ReactNode } from 'react';
import { useTheme } from '@mui/material';
import Tab from '@/components/organisms/GitBookContent/components/Tab';

const Tabs = ({ titles, children }: TabsProps<ReactNode>) => {
const { palette } = useTheme();
Expand Down Expand Up @@ -58,21 +59,15 @@ const Tabs = ({ titles, children }: TabsProps<ReactNode>) => {
/>
))}
</MuiTabs>
{children.map((child, index) => (
<div
key={index}
hidden={value !== index}
style={{
border: `1px solid ${palette.divider}`,
borderTopRightRadius: 4,
borderBottomRightRadius: 4,
borderBottomLeftRadius: 4,
padding: 16,
}}
>
{child}
</div>
))}
{Array.isArray(children) ? (
children.map((child, index) => (
<Tab key={index} hidden={value !== index}>
{child}
</Tab>
))
) : (
<Tab hidden={false}>{children}</Tab>
)}
</>
);
};
Expand Down

0 comments on commit e496be4

Please sign in to comment.