1 files changed, 65 insertions, 0 deletions
diff --git a/ui/src/components/node_card.rs b/ui/src/components/node_card.rs
new file mode 100644
index 0000000..00382c8
--- /dev/null
+++ b/ui/src/components/node_card.rs
@@ -0,0 +1,65 @@
+/*
+    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) 2026 metamuffin <metamuffin.org>
+*/
+
+use crate::{
+    RenderInfo,
+    components::{node_page::aspect_class, props::Props},
+};
+use jellycommon::{
+    jellyobject::Object,
+    routes::{u_image, u_node_slug, u_node_slug_player},
+    *,
+};
+
+markup::define! {
+    NodeCard<'a>(ri: &'a RenderInfo<'a>, nku: Object<'a>) {
+        @let node = nku.get(NKU_NODE).unwrap_or_default();
+        @let slug = node.get(NO_SLUG).unwrap_or_default();
+        @let cls = format!("node card poster {}", aspect_class(node));
+        div[class=cls] {
+            .poster {
+                a[href=u_node_slug(&slug)] {
+                    img[src=u_image(node.get(NO_PICTURES).unwrap_or_default().get(PICT_COVER).unwrap_or_default(), 512), loading="lazy"];
+                }
+                .cardhover.item {
+                    // @if node.media.is_some() {
+                        a.play.icon[href=u_node_slug_player(&slug)] { "play_arrow" }
+                    // }
+                    @Props { ri, nku: *nku, full: false }
+                }
+            }
+            div.title {
+                a[href=u_node_slug(&slug)] {
+                    @node.get(NO_TITLE)
+                }
+            }
+            div.subtitle {
+                span {
+                    @node.get(NO_SUBTITLE)
+                }
+            }
+        }
+    }
+    NodeCardWide<'a>(ri: &'a RenderInfo<'a>, nku: Object<'a>) {
+        div[class="node card widecard poster"] {
+            // div[class=&format!("poster {}", aspect_class(node.kind))] {
+            //     a[href=u_node_slug(&node.slug)] {
+            //         img[src=u_node_image(&node.slug, PictureSlot::Cover, 512), loading="lazy"];
+            //     }
+            //     .cardhover.item {
+            //         @if node.media.is_some() {
+            //             a.play.icon[href=u_node_slug_player(&node.slug)] { "play_arrow" }
+            //         }
+            //     }
+            // }
+            // div.details {
+            //     a.title[href=u_node_slug(&node.slug)] { @node.title }
+            //     @Props { node, udata, full: false, lang }
+            //     span.overview { @node.description }
+            // }
+        }
+    }
+}