Initial commit: igny8 project

frontend/src/components/ui/card/Card.tsx

@@ -0,0 +1,174 @@
+import { ReactNode } from "react";
+
+interface CardProps {
+  children: ReactNode;
+  className?: string;
+  onClick?: () => void;
+}
+
+export const Card: React.FC<CardProps> = ({
+  children,
+  className = "",
+  onClick,
+}) => {
+  return (
+    <div
+      className={`rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] sm:p-6 ${className}`}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+};
+
+interface CardImageProps {
+  src: string;
+  alt?: string;
+  className?: string;
+}
+
+export const CardImage: React.FC<CardImageProps> = ({
+  src,
+  alt = "card",
+  className = "",
+}) => {
+  return (
+    <div className="mb-5 overflow-hidden rounded-lg">
+      <img
+        alt={alt}
+        className={`overflow-hidden rounded-lg ${className}`}
+        src={src}
+      />
+    </div>
+  );
+};
+
+interface CardTitleProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const CardTitle: React.FC<CardTitleProps> = ({
+  children,
+  className = "",
+}) => {
+  return (
+    <h4
+      className={`mb-1 font-medium text-gray-800 text-theme-xl dark:text-white/90 ${className}`}
+    >
+      {children}
+    </h4>
+  );
+};
+
+interface CardContentProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const CardContent: React.FC<CardContentProps> = ({
+  children,
+  className = "",
+}) => {
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+};
+
+interface CardDescriptionProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const CardDescription: React.FC<CardDescriptionProps> = ({
+  children,
+  className = "",
+}) => {
+  return (
+    <p className={`text-sm text-gray-500 dark:text-gray-400 ${className}`}>
+      {children}
+    </p>
+  );
+};
+
+interface CardActionProps {
+  children: ReactNode;
+  href?: string;
+  onClick?: () => void;
+  variant?: "button" | "link";
+  className?: string;
+}
+
+export const CardAction: React.FC<CardActionProps> = ({
+  children,
+  href,
+  onClick,
+  variant = "button",
+  className = "",
+}) => {
+  const baseClasses =
+    variant === "button"
+      ? "inline-flex items-center gap-2 px-4 py-3 mt-4 text-sm font-medium text-white rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600"
+      : "inline-flex items-center gap-1 mt-4 text-sm text-brand-500 hover:text-brand-600";
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        className={`${baseClasses} ${className}`}
+        onClick={onClick}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      className={`${baseClasses} ${className}`}
+      onClick={onClick}
+      type="button"
+    >
+      {children}
+    </button>
+  );
+};
+
+interface CardIconProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const CardIcon: React.FC<CardIconProps> = ({
+  children,
+  className = "",
+}) => {
+  return (
+    <div
+      className={`mb-5 flex h-14 max-w-14 items-center justify-center rounded-[10.5px] bg-brand-50 text-brand-500 dark:bg-brand-500/10 ${className}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+interface HorizontalCardProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const HorizontalCard: React.FC<HorizontalCardProps> = ({
+  children,
+  className = "",
+}) => {
+  return (
+    <div
+      className={`flex flex-col gap-5 rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03] sm:flex-row sm:items-center sm:gap-6 ${className}`}
+    >
+      {children}
+    </div>
+  );
+};
+

frontend/src/components/ui/card/index.tsx

@@ -0,0 +1,11 @@
+export {
+  Card,
+  CardImage,
+  CardTitle,
+  CardContent,
+  CardDescription,
+  CardAction,
+  CardIcon,
+  HorizontalCard,
+} from "./Card";
+