Develop Frontend Components for Project, Package, and Instance Views

frontend/src/components/Card.tsx

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import './Card.css';
+
+interface CardProps {
+  children: ReactNode;
+  className?: string;
+  onClick?: () => void;
+  href?: string;
+  variant?: 'default' | 'elevated' | 'accent';
+}
+
+export function Card({ children, className = '', onClick, href, variant = 'default' }: CardProps) {
+  const baseClass = `card card--${variant} ${className}`.trim();
+
+  if (href) {
+    return (
+      <a href={href} className={`${baseClass} card--clickable`}>
+        {children}
+      </a>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <div className={`${baseClass} card--clickable`} onClick={onClick} role="button" tabIndex={0}>
+        {children}
+      </div>
+    );
+  }
+
+  return <div className={baseClass}>{children}</div>;
+}
+
+interface CardHeaderProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function CardHeader({ children, className = '' }: CardHeaderProps) {
+  return <div className={`card__header ${className}`.trim()}>{children}</div>;
+}
+
+interface CardBodyProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function CardBody({ children, className = '' }: CardBodyProps) {
+  return <div className={`card__body ${className}`.trim()}>{children}</div>;
+}
+
+interface CardFooterProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function CardFooter({ children, className = '' }: CardFooterProps) {
+  return <div className={`card__footer ${className}`.trim()}>{children}</div>;
+}