Zopra Logo

The next era React Framework for GPU
App interfaces

$cargo generate ppmpreetham/create-zopra-app
REACTIN RUSTZOPRAGPUI
Built for Cutting Edge Apps
Zopra Components
Accelerate your workflow with built-in components that you just need.
Zopra Panels
Infinite tiling, made from Trellis UI
SHIP FASTER
zopra
use zopra::{use_state, use_effect};
use zopra::{component, view};

#[component]
pub fn color_card(text: String) {
  let (count, set_count) = use_state(0usize);

  use_effect!(|| println!("count is {count}!"), [count]);

  view! {
    <div class="">
      {format!("Hello, {}!", text)}
      <div class="flex gap-2">
        <div class="size-8 bg-red" />
        <div class="size-8 bg-green" />
        <div class="size-8 bg-blue" />
        <div class="size-8 bg-yellow" />
        <div class="size-8 bg-black" />
        <div class="size-8 bg-white" />
      </div>
    </div>
  }
}
gpui
use gpui::{Context, IntoElement, Render, Window, div};

pub struct ColorCard {
  text: String,
  count: usize,
}

impl ColorCard {
  pub fn new(text: String, cx: &mut Context<Self>) -> Self {
    cx.observe_self(|this, _cx| println!("count is {}!", this.count)).detach();
    Self { text, count: 0usize }
  }
}

impl Render for ColorCard {
  fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
        div()

            .child(format!("Hello, {}!", &self.text))
            .child(
                div()
                    .flex()
                    .gap_2()
                    .child(div().size_8().bg(gpui::red()))
                    .child(div().size_8().bg(gpui::green()))
                    .child(div().size_8().bg(gpui::blue()))
                    .child(div().size_8().bg(gpui::yellow()))
                    .child(div().size_8().bg(gpui::black()))
                    .child(div().size_8().bg(gpui::white())),
            )
  }
}