feat(card): created card component

Card #25

src/ui/card/card.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import clsx from 'clsx';
+
+import { BaseCardProps } from './card.model';
+import { getCardClasses } from './card.utils';
+
+export const Card: React.FC<BaseCardProps> = ({
+  elevation,
+  children,
+  className,
+}) => (
+  <div className={clsx(getCardClasses(elevation), className)}>{children}</div>
+);

src/ui/card/card.model.ts

@@ -0,0 +1,5 @@
+export type BaseElevationOptions = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type BaseCardProps = {
+  elevation?: BaseElevationOptions;
+  className?: string;
+};

src/ui/card/card.utils.ts

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+
+import { BaseElevationOptions } from './card.model';
+
+const getShadowClass = (elevation?: BaseElevationOptions) => {
+  switch (elevation) {
+    case 'none':
+      return 'shadow-none';
+    case 'sm':
+      return 'shadow-sm';
+    case 'md':
+      return 'shadow-md';
+    case 'lg':
+      return 'shadow-lg';
+    case 'xl':
+      return 'shadow-xl';
+    case '2xl':
+      return 'shadow-2xl';
+    default:
+      return 'shadow';
+  }
+};
+export const getCardClasses = (elevation?: BaseElevationOptions) =>
+  clsx('border rounded p-2 ', getShadowClass(elevation));

src/ui/card/index.ts

@@ -0,0 +1,3 @@
+export * from './card.component';
+export * from './card.model';
+export * from './card.utils';

src/ui/index.ts

@@ -1,5 +1,6 @@
 export * from './alert';
 export * from './button';
+export * from './card';
 export * from './date-format';
 export * from './label';
 export * from './pagination';