1 files changed, 56 insertions, 0 deletions
diff --git a/ui/src/node_card.rs b/ui/src/node_card.rs
new file mode 100644
index 0000000..cedb81e
--- /dev/null
+++ b/ui/src/node_card.rs
@@ -0,0 +1,56 @@
+/*
+    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2025 metamuffin <metamuffin.org>
+*/
+
+use crate::{locale::Language, node_page::aspect_class, props::Props};
+use jellycommon::{Node, user::NodeUserData};
+
+markup::define! {
+    NodeCard<'a>(node: &'a Node, udata: &'a NodeUserData, lang: &'a Language) {
+        @let cls = format!("node card poster {}", aspect_class(node.kind));
+        div[class=cls] {
+            .poster {
+                a[href=uri!(r_library_node(&node.slug))] {
+                    img[src=uri!(r_item_poster(&node.slug, Some(1024))), loading="lazy"];
+                }
+                .cardhover.item {
+                    @if node.media.is_some() {
+                        a.play.icon[href=&uri!(r_player(&node.slug, PlayerConfig::default()))] { "play_arrow" }
+                    }
+                    @Props { node, udata, full: false, lang }
+                }
+            }
+            div.title {
+                a[href=uri!(r_library_node(&node.slug))] {
+                    @node.title
+                }
+            }
+            div.subtitle {
+                span {
+                    @node.subtitle
+                }
+            }
+        }
+    }
+    NodeCardWide<'a>(node: &'a Node, udata: &'a NodeUserData, lang: &'a Language) {
+        div[class="node card widecard poster"] {
+            div[class=&format!("poster {}", aspect_class(node.kind))] {
+                a[href=uri!(r_library_node(&node.slug))] {
+                    img[src=uri!(r_item_poster(&node.slug, Some(1024))), loading="lazy"];
+                }
+                .cardhover.item {
+                    @if node.media.is_some() {
+                        a.play.icon[href=&uri!(r_player(&node.slug, PlayerConfig::default()))] { "play_arrow" }
+                    }
+                }
+            }
+            div.details {
+                a.title[href=uri!(r_library_node(&node.slug))] { @node.title }
+                @Props { node, udata, full: false, lang }
+                span.overview { @node.description }
+            }
+        }
+    }
+}