feat: click icon to copy component name

website/build-app/components/IconsList/index.tsx

@@ -6,6 +6,8 @@ import { Box } from '@welcome-ui/box'
 import { camelCase, startCase } from 'lodash'
 import { Text } from '@welcome-ui/text'
 import { Card } from '@welcome-ui/card'
+import { Toast, toast } from '@welcome-ui/toast'
+import styled from '@xstyled/styled-components'
 
 import {
   actions,
@@ -36,6 +38,43 @@ export type IconListProps = {
     | 'brands'
     | 'flags'
 }
+
+const handleClickToCopy = (componentName: string) => {
+  const component = `<${componentName} />`
+  navigator.clipboard.writeText(component)
+
+  toast(
+    <Toast.Snackbar>
+      <p>
+        <b>{component}</b> copied to your clipboard
+      </p>
+    </Toast.Snackbar>,
+    { position: 'bottom-center' }
+  )
+}
+
+const StyledCard = styled(Card)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: xl;
+  color: dark-900;
+  border-radius: xl;
+  cursor: pointer;
+
+  &,
+  & span {
+    transition: medium;
+  }
+
+  &:hover {
+    border-color: dark-900;
+    span {
+      color: dark-900;
+    }
+  }
+`
+
 export const IconsList = ({ isIconFont, name }: IconListProps) => {
   const iconsByName = {
     arrows: arrows,
@@ -66,15 +105,7 @@ export const IconsList = ({ isIconFont, name }: IconListProps) => {
         }
 
         return (
-          <Card
-            alignItems="center"
-            borderRadius="xl"
-            color="dark-900"
-            display="flex"
-            flexDirection="column"
-            key={key}
-            p="xl"
-          >
+          <StyledCard key={key} onClick={() => handleClickToCopy(componentName)}>
             {Icon ? <Icon size="lg" /> : <Icons.CrossIcon size="lg" />}
             <Text
               as="span"
@@ -88,7 +119,7 @@ export const IconsList = ({ isIconFont, name }: IconListProps) => {
             >
               {componentName}
             </Text>
-          </Card>
+          </StyledCard>
         )
       })}
     </Box>