search

daytonaio / docs

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

47 implement tabbed interface from figma design #80

Closed Swearengen closed 2 months ago

vercel[bot] commented 3 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 21, 2024 9:21pm
Swearengen commented 3 months ago

I add styles by figma for tabs. We can use starlight tab component in markdown like this:

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
  <TabItem label="Stars">
    Sirius, Vega, Betelgeuse
  </TabItem>
  <TabItem label="Moons">
    Io, Europa, Ganymede
  </TabItem>
</Tabs>
Swearengen commented 3 months ago

Looks mostly correct, but I think there's a difference in bottom padding between the tab title and the underline.

Current state of this PR: image

Figma: image

Edit: the font weight looks different to the design also

@osslate Spacing should be fixed. I am not sure why font weight looks different, styling is the same as figma.

ivan-burazin commented 3 months ago

Looks mostly correct, but I think there's a difference in bottom padding between the tab title and the underline. Current state of this PR: image Figma: image Edit: the font weight looks different to the design also

@osslate Spacing should be fixed. I am not sure why font weight looks different, styling is the same as figma.

Yes the font looks like its heavier in the pr vs figma

Swearengen commented 3 months ago

Looks mostly correct, but I think there's a difference in bottom padding between the tab title and the underline. Current state of this PR: image Figma: image Edit: the font weight looks different to the design also

@osslate Spacing should be fixed. I am not sure why font weight looks different, styling is the same as figma.

Yes the font looks like its heavier in the pr vs figma

css Styles are the same as figma. I am not sure that I see the difference when I run docs locally

ivan-burazin commented 3 months ago

Where is this implemented so I can test?

Swearengen commented 3 months ago

Where is this implemented so I can test?

You can add 

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
  <TabItem label="Stars">
    Sirius, Vega, Betelgeuse
  </TabItem>
  <TabItem label="Moons">
    Io, Europa, Ganymede
  </TabItem>
</Tabs>

to markdown, and if you have styling I added on this branch you can see how it looks