feat(showcase): showcase list widget (#366)

code/widget-showcase/list.tape

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

code/widget-showcase/src/examples.rs

@@ -4,4 +4,5 @@ pub mod calendar;
 pub mod chart;
 pub mod gauge;
 pub mod line_gauge;
+pub mod list;
 pub mod table;

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

@@ -0,0 +1,26 @@
+use ratatui::{
+    prelude::*,
+    widgets::{HighlightSpacing, List, ListState},
+};
+
+pub fn render(frame: &mut Frame) {
+    let list = List::new([
+        Line::from(vec!["✔️ ".green(), "Fork tui-rs 💻".into()]),
+        Line::from(vec![
+            "✔️ ".green(),
+            "Create a ".into(),
+            "great".italic(),
+            " mascot 🐀".into(),
+        ]),
+        Line::from(vec!["✔️ ".green(), "Create a website & book 🕮".into()]),
+        Line::from(vec!["✔️ ".green(), "Celebrate 500th commit ⭐".into()]),
+        Line::from(vec!["✔️ ".green(), "Celebrate 1000th commit ✨".into()]),
+        Line::from(vec!["⌛".yellow(), "Release Ratatui 1.0.0 🎉".bold()]),
+    ])
+    .highlight_symbol("» ")
+    .highlight_spacing(HighlightSpacing::Always);
+
+    let mut state = ListState::default().with_selected(Some(5));
+
+    frame.render_stateful_widget(list, frame.size(), &mut state);
+}

code/widget-showcase/src/main.rs

@@ -29,6 +29,7 @@ enum Widget {
     Chart,
     Gauge,
     LineGauge,
+    List,
     Table,
 }
 
@@ -100,6 +101,7 @@ impl App {
             Widget::Chart => chart::render(frame),
             Widget::Gauge => gauge::render(frame),
             Widget::LineGauge => line_gauge::render(frame),
+            Widget::List => list::render(frame),
             Widget::Table => table::render(frame),
         }
         Ok(())

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

@@ -39,7 +39,9 @@ https://github.com/ratatui-org/website/issues/249 for information about how to c
 
 ![LineGauge](./line_gauge.png)
 
-## List <LinkBadge href="https://docs.rs/ratatui/latest/ratatui/widgets/struct.List.html" text="Docs" /> <LinkBadge text="Help Wanted" href="https://github.com/ratatui-org/website/issues/249" variant="caution" />
+## List <LinkBadge href="https://docs.rs/ratatui/latest/ratatui/widgets/struct.List.html" text="Docs" />
+
+![List](./list.png)
 
 ## Paragraph <LinkBadge href="https://docs.rs/ratatui/latest/ratatui/widgets/struct.Paragraph.html" text="Docs" /> <LinkBadge text="Help Wanted" href="https://github.com/ratatui-org/website/issues/249" variant="caution" />