search

diete-design / diete.design

https://diete.design
MIT License
0 stars 0 forks source link

Implement Tab bar component #35

Closed agazso closed 3 weeks ago

agazso commented 1 month ago

Part of #31

As seen on https://www.figma.com/file/SIfBIOnc6qmVOJ73q42IMp/diete.design-website?type=design&node-id=4-658&mode=design&t=kAM5ID8U7rq7hLMs-4

vojtechsimetka commented 1 month ago

This is not really a trivial component to build as a general one. Build it with our own known values is easy (just few buttons and content that changes based on state). But generic version is quite challenging (see e.g. https://github.com/huntabyte/bits-ui/tree/main/packages/bits-ui/src/lib/bits/tabs)

The generic usage could look as follows:

<Tabs default="svelte">
  <Tabs.Controls>
    <Tabs.Value value="svelte">Svelte</Tabs.Value>
    <Tabs.Value value="html">Pure HTML</Tabs.Value>
  </Tabs.Controls>

  <Tabs.Content value="svelte">{...}</Tabs.Content>
  <Tabs.Content value="html">{...}</Tabs.Content>
</Tabs>
agazso commented 1 month ago

I can see this becoming complex quickly. I would suggest to build it first for the component page, then we can generalize it later.