ui.rs

Previously we were rendering a Paragraph with no styling.

Let’s make some improvements:

1. Add a Block with a rounded border and the title "Counter App".
2. Make everything in the Paragraph have a foreground color of Color::Yellow

This is what our code will now look like:

use ratatui::{
  prelude::{Alignment, Frame},
  style::{Color, Style},
  widgets::{Block, BorderType, Borders, Paragraph},
};

use crate::app::App;

pub fn render(app: &mut App, f: &mut Frame) {
  f.render_widget(
    Paragraph::new(format!(
      "
        Press `Esc`, `Ctrl-C` or `q` to stop running.\n\
        Press `j` and `k` to increment and decrement the counter respectively.\n\
        Counter: {}
      ",
      app.counter
    ))
    .block(
      Block::default()
        .title("Counter App")
        .title_alignment(Alignment::Center)
        .borders(Borders::ALL)
        .border_type(BorderType::Rounded),
    )
    .style(Style::default().fg(Color::Yellow))
    .alignment(Alignment::Center),
    f.size(),
  )
}

Keep in mind it won’t render until we have written the code for tui::Frame

When rendered, this is what the UI will look like: