Not only is Sam’s post beautifully illustrated, it’s the little details too
Eric Clemmons, CEO of JavaScript Fatigue
@ericclemmons.com
6.7K followers 596 following 1K posts
ℹ Remote-first Staff Web guy. Product-centered UX and frictionless DX. 👔 @Honor | @Stripe | @AWS | @Starbucks | HigherEducation 🌐 ericclemmons.com
![Source:
```tsx
import ... from "@mui/material"
type Props = React.PropsWithChildren & {
gap?: React.ComponentProps<typeof Box>['gap'];
in?: Boolean;
};
const transition = 'all 250ms ease-in-out';
export function NativeCollapse(props: Props) {
return (
<Grid
container={true}
display="grid"
gap={props.gap}
gridTemplateRows={props.in ? '1fr' : '0fr'}
overflow="hidden"
sx={{transition}}
>
<Grid
item={true}
minHeight={0}
sx={{opacity: props.in ? 1 : 0, transition}}
visibility={props.in ? 'visible' : 'hidden'}
>
{props.children}
</Grid>
</Grid>
);
}
```](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:bl43uhh2gyy5xdpzafwhflgi/bafkreigf2exfr6dyns2apsjnpjfpcmkke2okhlazxhzfddf26rxpwr6qb4)
