From c6324cf51007030362b76fa634f0bfea8e5fb245 Mon Sep 17 00:00:00 2001
From: Bulkan Evcimen <13985+bulkan@users.noreply.github.com>
Date: Sun, 3 Mar 2024 11:56:04 +1100
Subject: [PATCH] feat(showcase): showcase tabs widget (#391)

Relates to https://github.com/ratatui-org/website/issues/249

---------

Co-authored-by: Josh McKinney <joshka@users.noreply.github.com>
---
 code/widget-showcase/src/examples.rs        |  1 +
 code/widget-showcase/src/examples/tabs.rs   | 13 +++++++++++++
 code/widget-showcase/src/main.rs            |  2 ++
 code/widget-showcase/tabs.tape              |  9 +++++++++
 src/content/docs/showcase/widgets/index.mdx |  4 +++-
 src/content/docs/showcase/widgets/tabs.gif  |  3 +++
 src/content/docs/showcase/widgets/tabs.png  |  3 +++
 7 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 code/widget-showcase/src/examples/tabs.rs
 create mode 100644 code/widget-showcase/tabs.tape
 create mode 100644 src/content/docs/showcase/widgets/tabs.gif
 create mode 100644 src/content/docs/showcase/widgets/tabs.png

diff --git a/code/widget-showcase/src/examples.rs b/code/widget-showcase/src/examples.rs
index 420f3dbe1..1ed5fed24 100644
--- a/code/widget-showcase/src/examples.rs
+++ b/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;
diff --git a/code/widget-showcase/src/examples/tabs.rs b/code/widget-showcase/src/examples/tabs.rs
new file mode 100644
index 000000000..60d169b72
--- /dev/null
+++ b/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());
+}
diff --git a/code/widget-showcase/src/main.rs b/code/widget-showcase/src/main.rs
index 5a86e5fc8..16d0fdc02 100644
--- a/code/widget-showcase/src/main.rs
+++ b/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(())
     }
diff --git a/code/widget-showcase/tabs.tape b/code/widget-showcase/tabs.tape
new file mode 100644
index 000000000..123ec8d96
--- /dev/null
+++ b/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
diff --git a/src/content/docs/showcase/widgets/index.mdx b/src/content/docs/showcase/widgets/index.mdx
index 610745d29..c09449849 100644
--- a/src/content/docs/showcase/widgets/index.mdx
+++ b/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
 
diff --git a/src/content/docs/showcase/widgets/tabs.gif b/src/content/docs/showcase/widgets/tabs.gif
new file mode 100644
index 000000000..cbead7765
--- /dev/null
+++ b/src/content/docs/showcase/widgets/tabs.gif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9cd9a7f663665fa50f544b5d8f71449831f818103267b218e48b6305aebf464c
+size 68852
diff --git a/src/content/docs/showcase/widgets/tabs.png b/src/content/docs/showcase/widgets/tabs.png
new file mode 100644
index 000000000..10c600a8f
--- /dev/null
+++ b/src/content/docs/showcase/widgets/tabs.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c856f5324fa602b809c4cdb6b17e301eb9019fd04f92be7f7ee694661e5c79bc
+size 18948