ultisuite-client/components/gmail/settings/automation/automation-tab-masonry.tsx
R3D347HR4Y 9e9fd208ad
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
feat(admin-settings): enhance admin settings with new components and layout improvements
- Introduced new components for managing admin settings, including AdminListControls, AdminSettingsCard, and TechBrandSelectLabel.
- Implemented dynamic loading for admin settings sections to optimize performance.
- Enhanced the layout of various admin settings sections for better user experience.
- Updated the AiAssistantSection to include LLM provider management and improved model selection.
- Refactored authentication settings to streamline configuration and improve accessibility.
2026-06-15 00:22:20 +02:00

61 lines
1.4 KiB
TypeScript

"use client"
import { Children, type ReactNode } from "react"
import { cn } from "@/lib/utils"
function MasonryStack({ children }: { children: ReactNode }) {
return (
<div className="flex min-w-0 flex-1 flex-col gap-4 lg:gap-5">{children}</div>
)
}
export function AutomationTabMasonry({
columns,
children,
className,
}: {
columns: 1 | 2
children: ReactNode
className?: string
}) {
const items = Children.toArray(children).filter(Boolean)
if (columns === 1) {
return (
<div className={cn("flex w-full flex-col gap-4", className)}>{children}</div>
)
}
const left = items.filter((_, index) => index % 2 === 0)
const right = items.filter((_, index) => index % 2 === 1)
return (
<div className={cn("w-full", className)}>
<div className="flex flex-col gap-4 lg:hidden">
{items.map((child, index) => (
<div key={index} className="min-w-0">
{child}
</div>
))}
</div>
<div className="hidden items-start gap-5 lg:flex">
<MasonryStack>
{left.map((child, index) => (
<div key={index} className="min-w-0">
{child}
</div>
))}
</MasonryStack>
<MasonryStack>
{right.map((child, index) => (
<div key={index} className="min-w-0">
{child}
</div>
))}
</MasonryStack>
</div>
</div>
)
}