sqlmesh/web/common/src/components/HorizontalContainer/HorizontalContainer.stories.tsx at v0.229.0 · SQLMesh/sqlmesh · 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import {
  HorizontalContainer,
  type HorizontalContainerProps,
} from './HorizontalContainer'

export default {
  title: 'Components/Containers/HorizontalContainer',
  component: HorizontalContainer,
}

const content = Array.from({ length: 20 }, (_, i) => (
  <div
    key={i}
    style={{
      minWidth: 100,
      padding: 8,
      borderRight: '1px solid #eee',
      display: 'inline-block',
    }}
  >
    Col {i + 1}
  </div>
))

export const Default = (args: HorizontalContainerProps) => (
  <div style={{ height: 350, width: '100%', border: '1px solid #ccc' }}>
    <HorizontalContainer
      {...args}
      scroll={false}
    >
      {content}
    </HorizontalContainer>
  </div>
)
Default.storyName = 'Default (No Scroll)'

export const WithScroll = (args: HorizontalContainerProps) => (
  <div style={{ height: 350, width: '100%', border: '1px solid #ccc' }}>
    <HorizontalContainer
      {...args}
      scroll={true}
    >
      <div style={{ width: 2000, display: 'flex' }}>{content}</div>
    </HorizontalContainer>
  </div>
)

export const CustomClassName = (args: HorizontalContainerProps) => (
  <div style={{ height: 350, width: '100%', border: '1px solid #ccc' }}>
    <HorizontalContainer
      {...args}
      className="bg-neutral-10 p-4 rounded-2xl"
    >
      {content}
    </HorizontalContainer>
  </div>
)
CustomClassName.storyName = 'With Custom ClassName'

export const NestedHorizontalContainer = (args: HorizontalContainerProps) => (
  <div style={{ height: 350, width: '100%', border: '1px solid #ccc' }}>
    <HorizontalContainer
      {...args}
      scroll={false}
      className="gap-4"
    >
      <div style={{ background: '#f5f5f5', padding: 8 }}>Left</div>
      <div
        style={{ width: '100%', border: '1px solid #eee', overflow: 'hidden' }}
      >
        <HorizontalContainer scroll={true}>
          <div style={{ width: 2000, display: 'flex' }}>{content}</div>
        </HorizontalContainer>
      </div>
      <div style={{ background: '#f5f5f5', padding: 8, flexShrink: 0 }}>
        Right
      </div>
    </HorizontalContainer>
  </div>
)
NestedHorizontalContainer.storyName = 'Nested HorizontalContainer'