Merge pull request #7167 from Mousticke/ts-migrate-selectablecard

Ts migrate selectablecard

Author: pettinarip

src/components/SelectableCard.js renamed to src/components/SelectableCard.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "styled-components"
-import Emoji from "../components/Emoji"
+import Emoji from "./Emoji"
 
 import Checkbox from "./Checkbox"
 
@@ -27,27 +27,32 @@ const Description = styled.p`
 const TopContent = styled.div`
   position: relative;
 `
+export interface IProps {
+  emoji: string
+  title: string
+  description: string
+  className?: string
+  onSelect: (val: string) => void
+  value: string
+  isSelected?: boolean
+}
 
-const Card = ({
+const Card: React.FC<IProps> = ({
   emoji,
   title,
   description,
   children,
   className,
   onSelect,
   value,
-  isSelected,
+  isSelected = false,
 }) => {
   const handleSelect = () => {
     onSelect(value)
   }
 
   return (
-    <StyledCard
-      isSelected={isSelected}
-      className={className}
-      onClick={handleSelect}
-    >
+    <StyledCard className={className} onClick={handleSelect}>
       <TopContent>
         <Emoji text={emoji} size={3} mb={`1em`} />
         <StyledCheckbox checked={isSelected} aria-label={title} />