feat: conditional render component

Jacky Zhao

2025-03-24 aaa5c8e8e40be33aec74c1cf0073ac081cb918fc

 docs/layout-components.md

@@ -60,3 +60,25 @@
```typescript
Component.DesktopOnly(Component.TableOfContents())
```

## `ConditionalRender` Component

The `ConditionalRender` component is a wrapper that conditionally renders its child component based on a provided condition function. This is useful for creating dynamic layouts where components should only appear under certain conditions.

```typescript
type ConditionalRenderConfig = {
  component: QuartzComponent
  condition: (props: QuartzComponentProps) => boolean
}
```

### Example Usage

```typescript
Component.ConditionalRender({
  component: Component.Search(),
  condition: (props) => props.displayClass !== "fullpage",
})
```

This example would only render the Search component when the page is not in fullpage mode.