Add checkbox indicator

Author: coderitual

src/components/card2/CardCheckbox.tsx

@@ -32,10 +32,41 @@ const CardCheckbox = ({
       className={cx('sg-card-radio', className)}
       style={{...style, ...cssVariables}}
     >
-      <Checkbox />
+      <CardCheckboxIndicator />
       {children}
     </label>
   );
 };
 
+export interface CardCheckboxIndicatorPropsType {
+  slot?:
+    | 'top-left'
+    | 'center-left'
+    | 'bottom-left'
+    | 'top-right'
+    | 'center-right'
+    | 'bottom-right';
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+const CardCheckboxIndicator = ({
+  slot = 'top-left',
+  style,
+  className,
+}: CardCheckboxIndicatorPropsType) => {
+  return (
+    <div
+      className={cx(
+        'sg-card-checkbox__indicator',
+        `sg-card-checkbox__indicator--${slot}`,
+        className
+      )}
+      style={style}
+    >
+      <Checkbox />
+    </div>
+  );
+};
+
 export default CardCheckbox;

src/components/card2/card.scss

@@ -2,6 +2,7 @@
 .sg-card-radio,
 .sg-card-checkbox {
   display: block;
+  position: relative;
   width: var(--card-width, auto);
   height: var(--card-height, auto);
   border-radius: 8px;
@@ -17,3 +18,9 @@
     border-color: #46535f;
   }
 }
+
+.sg-card-checkbox__indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+}