feat(ui): setup layout for books, pages, & content

src/ui.rs

@@ -1,36 +1,45 @@
 use tui::{
  backend::Backend,
- layout::Alignment,
- style::{Color, Style},
- widgets::{Block, BorderType, Borders, Paragraph},
+ layout::{Alignment, Constraint, Direction, Layout},
+ widgets::{Block, Borders},
  Frame,
 };
 
 use crate::app::App;
 
 /// Renders the user interface widgets.
-pub fn render<B: Backend>(app: &mut App, frame: &mut Frame<'_, B>) {
+pub fn render<B: Backend>(_app: &mut App, frame: &mut Frame<'_, B>) {
  // This is where you add new widgets.
  // See the following resources:
  // - https://docs.rs/ratatui/latest/ratatui/widgets/index.html
  // - https://github.com/tui-rs-revival/ratatui/tree/master/examples
- frame.render_widget(
- Paragraph::new(format!(
- "This is a tui template.\n\
- Press `Esc`, `Ctrl-C` or `q` to stop running.\n\
- Press left and right to increment and decrement the counter respectively.\n\
- Counter: {}",
- app.counter
- ))
- .block(
- Block::default()
- .title("Template")
- .title_alignment(Alignment::Center)
- .borders(Borders::ALL)
- .border_type(BorderType::Rounded),
+ let chunks = Layout::default()
+ .direction(Direction::Horizontal)
+ .margin(1)
+ .constraints(
+ [
+ Constraint::Percentage(20),
+ Constraint::Percentage(30),
+ Constraint::Percentage(50),
+ ]
+ .as_ref(),
  )
- .style(Style::default().fg(Color::Cyan).bg(Color::Black))
- .alignment(Alignment::Center),
- frame.size(),
- )
+ .split(frame.size());
+ let books_block = Block::default()
+ .title("Books")
+ .title_alignment(Alignment::Center)
+ .borders(Borders::ALL);
+ frame.render_widget(books_block, chunks[0]);
+
+ let pages_block = Block::default()
+ .title("Pages")
+ .title_alignment(Alignment::Center)
+ .borders(Borders::ALL);
+ frame.render_widget(pages_block, chunks[1]);
+
+ let content_block = Block::default()
+ .title("Content")
+ .title_alignment(Alignment::Center)
+ .borders(Borders::ALL);
+ frame.render_widget(content_block, chunks[2]);
 }