feat(showcase): showcase tabs widget (#391)

Relates to #249

---------

Co-authored-by: Josh McKinney <joshka@users.noreply.github.com>

code/widget-showcase/src/examples.rs

@@ -9,3 +9,4 @@ pub mod list;
 pub mod paragraph;
 pub mod sparkline;
 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

@@ -34,6 +34,7 @@ enum Widget {
     Paragraph,
     Sparkline,
     Table,
+    Tabs,
 }
 
 fn main() -> color_eyre::Result<()> {
@@ -109,6 +110,7 @@ impl App {
             Widget::Paragraph => paragraph::render(frame),
             Widget::Sparkline => sparkline::render(frame),
             Widget::Table => table::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

@@ -59,7 +59,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