daytonaio / docs

Official Documentation for Daytona
https://daytona.io/docs
Apache License 2.0
10 stars 11 forks source link

Implement tabbed interface from Figma design #47

Closed osslate closed 2 months ago

osslate commented 4 months ago

This component needs to be implemented for use across the docs:

image

Ideally the usage looks something like this:

<TabbedContent>
  <Tab title="From Daytona Dashboard">
    Markdown content _here_
  </Tab>
  <Tab title="Via Dashboard URL">
    Markdown content _here_
  </Tab>
</TabbedContent>

Would also be nice to have an optional icon attribute to set an icon appearing on the left of the tab title, but deferring to @ivan-burazin

cc: @mikimih

Swearengen commented 3 months ago

@nkkko @fabjanvucina are you sure that this is possible to do? This is a branch where I was experimenting but couldn't make it to work.

I tried using context but looks like you can't do that in markdown. I tried with the state and passing it down to child components but that was also a problem.

osslate commented 3 months ago

FWIW, Starlight has a very similar component called Tabs. It might be possible to simply style this component rather than recreate the whole thing from scratch, or at least you might find a solution to your problem in it's implementation.