konnosDashboard
FormSection.tsx94 lines · main
1import { Children } from 'react'
2import { cn } from 'ui'
3
4export const FormSection = ({
5 children,
6 id,
7 header,
8 disabled,
9 className,
10}: {
11 children: React.ReactNode
12 id?: string
13 header?: React.ReactNode
14 disabled?: boolean
15 visible?: boolean
16 className?: string
17}) => {
18 const classes = [
19 'grid grid-cols-12 gap-6 px-card py-4 md:py-8',
20 `${disabled ? ' opacity-30' : ' opacity-100'}`,
21 `${className}`,
22 ]
23
24 return (
25 <div id={id} className={classes.join(' ')}>
26 {header}
27 {children}
28 </div>
29 )
30}
31
32export const FormSectionLabel = ({
33 children,
34 className = '',
35 description,
36}: {
37 children: React.ReactNode | string
38 className?: string
39 description?: React.ReactNode
40}) => {
41 if (description !== undefined) {
42 return (
43 <div className={cn('flex flex-col space-y-2 col-span-12 lg:col-span-5', className)}>
44 <label className="text-foreground text-sm">{children}</label>
45 {description}
46 </div>
47 )
48 } else {
49 return (
50 <label className={`text-foreground col-span-12 text-sm lg:col-span-5 ${className}`}>
51 {children}
52 </label>
53 )
54 }
55}
56
57const Shimmer = () => (
58 <div className="flex w-full flex-col gap-2">
59 <div className="shimmering-loader h-2 w-1/3 rounded-sm"></div>
60 <div className="flex flex-col justify-between space-y-2">
61 <div className="shimmering-loader h-[34px] w-2/3 rounded-sm" />
62 </div>
63 </div>
64)
65
66export const FormSectionContent = ({
67 children,
68 loading = true,
69 loaders,
70 fullWidth,
71 className,
72}: {
73 children: React.ReactNode | string
74 loading?: boolean
75 loaders?: number
76 fullWidth?: boolean
77 className?: string
78}) => {
79 return (
80 <div
81 className={`
82 relative col-span-12 flex flex-col gap-6 @lg:col-span-7
83 ${fullWidth && 'col-span-12!'}
84 ${className}
85 `}
86 >
87 {loading
88 ? !!loaders
89 ? new Array(loaders).fill(0).map((_, idx) => <Shimmer key={idx} />)
90 : Children.map(children, (_, idx) => <Shimmer key={idx} />)
91 : children}
92 </div>
93 )
94}