ui/src/components/container.tsx at main · RubricLab/ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import type { z } from 'zod/v4'
import {
	alignClasses,
	arrangementClasses,
	borderClasses,
	gapClasses,
	heightClasses,
	justifyClasses,
	overflowClasses,
	paddingClasses,
	roundedClasses,
	widthClasses,
	wrapClasses
} from '../styles/classes'
import type { ContainerProps, ContainerVariantEnum } from '../types'
import { cn } from '../utils'

const containerVariantClasses: Record<z.infer<typeof ContainerVariantEnum>, string> = {
	ghost: '',
	primary: 'bg-primary text-white',
	secondary: 'bg-accent'
}

export const Container: React.FC<ContainerProps> = ({
	id,
	children,
	arrangement = 'column',
	variant = 'ghost',
	gap = 'none',
	padding = 'none',
	border = 'none',
	justify = 'start',
	align = 'start',
	rounded = 'default',
	height = 'fit',
	width = 'full',
	overflow = 'visible',
	wrap = 'nowrap',
	className
}) => {
	return (
		<div
			id={id}
			className={cn(
				arrangement && arrangementClasses[arrangement],
				variant && containerVariantClasses[variant],
				gap && gapClasses[gap],
				padding && paddingClasses[padding],
				justify && justifyClasses[justify],
				align && alignClasses[align],
				wrap && wrapClasses[wrap],
				border && borderClasses[border],
				rounded && roundedClasses[rounded],
				height && heightClasses[height],
				width && widthClasses[width],
				overflow && overflowClasses[overflow],
				className
			)}
		>
			{children}
		</div>
	)
}