refactor: create cluster by steps

src/components/templates/card.tsx

@@ -10,20 +10,23 @@ interface CardProps {
   ghost?: boolean;
   header?: React.ReactNode;
   footer?: React.ReactNode;
+  icon?: React.ReactNode;
+  active?: boolean;
+  disabled?: boolean;
   onClick?: () => void;
 }
 
 const CardWrapper = styled.div`
   overflow: hidden;
   display: flex;
-  flex-direction: column;
+  padding: 22px;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
   border: 1px solid var(--ant-color-border);
   border-radius: var(--border-radius-base);
   cursor: default;
   width: 100%;
-  &:hover {
+  &.clickable:hover:not(.disabled) {
     background-color: var(--ant-color-fill-tertiary);
     transition: background-color 0.2s ease;
   }
@@ -35,15 +38,47 @@ const CardWrapper = styled.div`
   &.active {
     background-color: var(--ant-color-fill-tertiary);
   }
-  &.clickable {
+
+  &.clickable:not(.disabled) {
     cursor: pointer;
   }
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+    background-color: var(--ant-color-fill-quaternary);
+  }
 `;
 
 const CardContent = styled.div`
-  padding: 16px 20px;
   width: 100%;
   flex: 1;
+  color: var(--ant-color-text-tertiary);
+`;
+
+const Inner = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 8px;
+  line-height: 1.5;
+`;
+
+const Icon = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+  font-size: 46px;
+`;
+
+const Header = styled.div`
+  font-weight: bold;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 `;
 
 const Card: React.FC<CardProps> = (props) => {
@@ -55,6 +90,9 @@ const Card: React.FC<CardProps> = (props) => {
     ghost = false,
     header,
     footer,
+    icon,
+    active,
+    disabled,
     onClick
   } = props;
 
@@ -62,14 +100,19 @@ const Card: React.FC<CardProps> = (props) => {
     <CardWrapper
       className={classNames(className, {
         clickable: clickable,
+        active: active,
+        disabled: disabled,
         ghost: ghost
       })}
       style={{ height: height || '180px' }}
       onClick={onClick}
     >
-      {header}
-      <CardContent>{children}</CardContent>
-      {footer}
+      {icon && <Icon>{icon}</Icon>}
+      <Inner>
+        {header && <Header>{header}</Header>}
+        <CardContent>{children}</CardContent>
+        {footer}
+      </Inner>
     </CardWrapper>
   );
 };