feat(showcase): showcase tabs widget

code/widget-showcase/src/examples.rs

@@ -7,3 +7,4 @@ pub mod line_gauge;
 pub mod list;
 pub mod paragraph;
 pub mod table;
+pub mod tabs;

code/widget-showcase/src/examples/tabs.rs

@@ -0,0 +1,13 @@
+use ratatui::{prelude::*, widgets::*};
+
+pub fn render(frame: &mut Frame) {
+    let tabs = Tabs::new(vec!["TODO", "IN PROGRESS", "DONE"])
+        .block(Block::default().title("Project").borders(Borders::ALL))
+        .style(Style::default().white())
+        .highlight_style(Style::default().underlined().bold().yellow())
+        .select(1)
+        .divider(symbols::DOT)
+        .padding(" ", " ");
+
+    frame.render_widget(tabs, frame.size());
+}

code/widget-showcase/src/main.rs

@@ -31,6 +31,7 @@ enum Widget {
     LineGauge,
     List,
     Table,
+    Tabs,
     Paragraph,
 }
 
@@ -105,6 +106,7 @@ impl App {
             Widget::List => list::render(frame),
             Widget::Table => table::render(frame),
             Widget::Paragraph => paragraph::render(frame),
+            Widget::Tabs => tabs::render(frame),
         }
         Ok(())
     }

code/widget-showcase/tabs.tape

@@ -0,0 +1,9 @@
+# A VHS tape. See https://github.com/charmbracelet/vhs
+Output "../../src/content/docs/showcase/widgets/tabs.gif"
+Set Theme "Aardvark Blue"
+Set Width 600
+Set Height 260
+Type "cargo run -- -w tabs" Enter
+Sleep 5s
+Screenshot "../../src/content/docs/showcase/widgets/tabs.png"
+Sleep 1s

src/content/docs/showcase/widgets/index.mdx

@@ -55,7 +55,9 @@ https://github.com/ratatui-org/website/issues/249 for information about how to c
 
 ![Table](./table.png)
 
-## Tabs <LinkBadge href="https://docs.rs/ratatui/latest/ratatui/widgets/struct.Tabs.html" text="Docs" /> <LinkBadge text="Help Wanted" href="https://github.com/ratatui-org/website/issues/249" variant="caution" />
+## Tabs <LinkBadge href="https://docs.rs/ratatui/latest/ratatui/widgets/struct.Tabs.html" text="Docs" /> 
+
+![Tabs(./tabs.png)
 
 ## Third Party Widgets