fix(card): add variant support and resource styling to Card component

fix(chip): update variant class formatting and condition for label display
style(card): enhance resource card styles with drop shadow and layout adjustments
chore: bump package versions for leptos and styles

Author: Phosphorus-M

Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "rustlanges-components"
 description = "RustLangES components library"
-version = "0.1.1"
+version = "0.2.2"
 edition = "2024"
 license = "MIT"
 
@@ -16,4 +16,4 @@ members = [ "crates/core", "crates/leptos" ]
 
 [dependencies]
 components-core = { package = "rustlanges-components-core", version = "0.1", path = "./crates/core" }
-leptos-components = { path = "./crates/leptos", version = "0.1", optional = true }
+leptos-components = { path = "./crates/leptos", version = "0.2", optional = true }

crates/leptos/Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "leptos-components"
 description = "RustLangES leptos components"
-version = "0.1.2"
+version = "0.2.2"
 edition = "2024"
 license = "MIT"
 

crates/leptos/src/card.rs

@@ -1,23 +1,47 @@
 use components_core::{BASE_CLASS, concat};
 use leptos::prelude::*;
 
+#[derive(Default, Debug, PartialEq)]
+pub enum Variant {
+    #[default]
+    Normal,
+    Resource,
+}
+
 #[component]
 pub fn Card(
     children: Children,
+    #[prop(into, optional, default = Variant::Normal)] variant: Variant,
     #[prop(into, optional)] class: String,
     #[prop(into, optional, default = false)] clickable: bool,
     #[prop(into, optional, default = false)] disabled: bool,
 ) -> impl IntoView {
-    let class = crate::tw!(
+    let mut class = crate::tw!(
         concat!(BASE_CLASS, "-card"),
         clickable.then_some(concat!(BASE_CLASS, "-card--clickable")),
         disabled.then_some(concat!("disabled ", BASE_CLASS, "-card--disabled")),
         class
     );
 
+    if variant == Variant::Resource {
+        class = format!("{}-card--resource relative", BASE_CLASS);
+
+        return view! {
+            <div class={class}>
+                <svg viewBox="0 0 334 444" fill="none" xmlns="http://www.w3.org/2000/svg" class="drop-shadow-resource-card">
+                    <path d="M267.221 2C275.589 2 283.519 5.74306 288.838 12.2038L325.617 56.8794C329.744 61.892 332 68.1829 332 74.6756V414C332 429.464 319.464 442 304 442H30C14.536 442 2 429.464 2 414V30C2 14.536 14.536 2 30 2H267.221Z" fill="#3D3D3D" stroke="black" stroke-width="2"/>
+                </svg>
+                <div class="rustlanges-card--resource-body">
+                {children()}
+                </div>
+            </div>
+        }.into_any();
+    }
+
     view! {
         <div class={class}>
             {children()}
         </div>
     }
+    .into_any()
 }

crates/leptos/src/chip.rs

@@ -32,14 +32,14 @@ pub fn Chip(
 ) -> impl IntoView {
     let class = crate::tw!(
         concat!(BASE_CLASS, "-chip"),
-        format!("{BASE_CLASS}-chip--{variant:?}"),
+        format!("{BASE_CLASS}-chip--{variant:?}").to_lowercase(),
         class
     );
 
     view! {
         <div class=class>
             {variant.icon()}
-            {(variant != Variant::Numeric).then_some(format!("#{label}")).unwrap_or(label)}
+            {(variant == Variant::Numeric).then_some(format!("#{label}")).unwrap_or(label)}
         </div>
     }
 }

js/react/lib/components/card/card.component.tsx

@@ -11,6 +11,9 @@ export type CardProps = PropsWithChildren & {
 export const Card = withAs((Component, props: CardProps) => {
   const { clickable = false, disabled = false, className, ...attr } = props;
 
+  // TODO: Add parity with the leptos version | e.g. variants like 'normal' and 'resource'
+  // TODO: If 'resource', add the svg of the card with the drop shadow effect
+
   return (
     <Component
       className={cn(

styles/components/card.css

@@ -20,4 +20,13 @@
     @apply border-neutral-200;
     @apply dark:border-neutral-600;
   }
+
+  .rustlanges-card--resource > svg {
+    filter: drop-shadow(0px 0px 0px #000000) drop-shadow(4px 4px 0px #000000) url(#inset-shadow);
+    @apply w-full h-auto;
+  }
+
+  .rustlanges-card--resource-body {
+    @apply absolute inset-0 flex justify-center items-center p-10;
+  }
 }

styles/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rustlanges/styles",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "exports": {
     ".": "./tailwindcss.css",