Merge pull request #4 from yun-cheng/feat/ui-card

feat(UI): add Card component

src/components/ui/Card.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import cn from 'utils/cn'
+
+const Card = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn(
+			'rounded-lg bg-white text-xs text-grayish-blue shadow-card',
+			className
+		)}
+		{...props}
+	/>
+))
+Card.displayName = 'Card'
+
+const CardContent = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+))
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn('flex items-center p-6 pt-0', className)}
+		{...props}
+	/>
+))
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardContent, CardFooter }

tailwind.config.js

@@ -39,6 +39,9 @@ const config = {
 				circles: 'url("/img/circles.svg")',
 				background: 'url("/img/background.svg")'
 			},
+			boxShadow: {
+				card: '0 20px 30px -5px rgba(127, 137, 185, 0.15)'
+			},
 			keyframes: {
 				'accordion-down': {
 					from: { height: '0' },