feat: add card list component

2025-09-16 11:26:17 +08:00
parent 89001dbb92
commit 33df825b73
4 changed files with 172 additions and 4 deletions
@@ -0,0 +1,44 @@
+import classNames from 'classnames';
+import React from 'react';
+import styled from 'styled-components';
+
+interface CardProps {
+  height?: string | number;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const CardWrapper = styled.div`
+  overflow: hidden;
+  display: flex;
+  padding: 16px 20px;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  border: 1px solid var(--ant-color-border);
+  border-radius: var(--border-radius-base);
+  cursor: pointer;
+  width: 100%;
+  &:hover {
+    background-color: var(--ant-color-fill-tertiary);
+  }
+
+  &.active {
+    background-color: var(--ant-color-fill-tertiary);
+  }
+`;
+
+const Card: React.FC<CardProps> = (props) => {
+  const { className, height, children } = props;
+
+  return (
+    <CardWrapper
+      className={classNames('card-wrapper', className)}
+      style={{ height: height || '180px' }}
+    >
+      {children}
+    </CardWrapper>
+  );
+};
+
+export default Card;