Create Card component

webui/src/common/components/Card/Card.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import './styles.sass';
+
+export const Card = ({
+  children,
+  className = '',
+  hover = false,
+  padding = 'md',
+  variant = 'default',
+  ...rest
+}) => {
+  const cardClasses = [
+    'card',
+    `card--${variant}`,
+    `card--padding-${padding}`,
+    hover && 'card--hover',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={cardClasses} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+export const CardHeader = ({ children, className = '' }) => (
+  <div className={`card-header ${className}`}>
+    {children}
+  </div>
+);
+
+export const CardBody = ({ children, className = '' }) => (
+  <div className={`card-body ${className}`}>
+    {children}
+  </div>
+);
+
+export const CardFooter = ({ children, className = '' }) => (
+  <div className={`card-footer ${className}`}>
+    {children}
+  </div>
+);

webui/src/common/components/Card/index.js

@@ -0,0 +1 @@
+export { Card as default, CardHeader, CardBody, CardFooter } from './Card.jsx';

webui/src/common/components/Card/styles.sass

@@ -0,0 +1,43 @@
+.card
+  background: var(--bg-alt)
+  border: 1px solid var(--border)
+  border-radius: var(--radius-lg)
+  transition: all 0.2s ease
+  
+  &--hover:hover
+    border-color: var(--border-strong)
+    transform: translateY(-2px)
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
+  
+  &--padding-none
+    padding: 0
+  
+  &--padding-sm
+    padding: 1rem
+  
+  &--padding-md
+    padding: 1.5rem
+  
+  &--padding-lg
+    padding: 2rem
+  
+  &--variant-elevated
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
+  
+  &--variant-outlined
+    border-width: 2px
+
+.card-header
+  margin-bottom: 1rem
+  
+  &:last-child
+    margin-bottom: 0
+
+.card-body
+  flex: 1
+
+.card-footer
+  margin-top: 1rem
+  
+  &:first-child
+    margin-top: 0