feat: textbox which takes in anime query

src/ui.rs

@@ -1,25 +1,54 @@
 use ratatui::{
-    layout::Alignment,
+    prelude::*,
     style::{Color, Style},
-    widgets::{Block, BorderType, Paragraph},
+    widgets::*,
     Frame,
 };
 
 use crate::app::App;
 
-/// Renders the user interface widgets.
+/// Renders the user interface.
 pub fn render(app: &mut App, frame: &mut Frame) {
-    frame.render_widget(
+    let chunks = Layout::default()
-        Paragraph::new(format!(
+        .direction(Direction::Vertical)
-            "This is just a placeholder."
+        .margin(2)
-        ))
+        .constraints(
-        .block(
+            [
-            Block::bordered()
+                Constraint::Length(1),
-                .title("Template")
+                Constraint::Length(3),
-                .title_alignment(Alignment::Center)
+                Constraint::Min(1),
-                .border_type(BorderType::Rounded),
+            ]
+            .as_ref(),
         )
-        .centered(),
+        .split(frame.size());
-        frame.size(),
+
+    let mut text: Vec<Line> = vec![];
+    text.push(
+      Line::from(vec![
+        "Press ".into(),
+        "Esc".bold(),
+        " or ".into(),
+        "Ctrl+C".bold(),
+        " to quit, and ".into(),
+        "Enter".bold(),
+        " to submit your query.".into(),
+      ]),
+    );
+    let help_message = Paragraph::new(text);
+    frame.render_widget(help_message, chunks[0]);
+
+    let width = chunks[0].width.max(3) - 3;
+
+    let scroll = app.input.visual_scroll(width as usize);
+    let input = Paragraph::new(app.input.value())
+        .style(Style::default().fg(Color::Yellow))
+        .scroll((0, scroll as u16))
+        .block(Block::default().borders(Borders::ALL).title("Search (Anime)"));
+    frame.render_widget(input, chunks[1]);
+        frame.set_cursor(
+        chunks[1].x
+            + ((app.input.visual_cursor()).max(scroll) - scroll) as u16
+            + 1,
+        chunks[1].y + 1,
     )
 }