chore: improve getting started

segunadebayo · segunadebayo · commit 208531d4c6c3 · 2022-06-20T14:47:54.000+04:00
diff --git a/content/getting-started/index.mdx b/content/getting-started/index.mdx
@@ -54,4 +54,4 @@ Whether you're a beginner or advanced Chakra UI user, joining our community is
 the best way to connect with like-minded people who build great products with
 the library.
 
-[Join our Discord](https://chakra-ui.com/discord)
+<JoinCommunityCards />
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -32,7 +32,7 @@ import ChakraNextImage from 'components/chakra-next-image'
 import { AdBanner } from 'components/chakra-pro/ad-banner'
 import { ChakraProAd } from 'components/chakra-pro/home-page-ad'
 import Container from 'components/container'
-import DiscordStrip from 'components/discord-strip'
+import { DiscordStrip } from 'components/discord-strip'
 import { Footer } from 'components/footer'
 import Header from 'components/header'
 import SandpackEmbed from 'components/sandpack-embed'
diff --git a/src/components/community-card.tsx b/src/components/community-card.tsx
@@ -0,0 +1,45 @@
+import { Box, Text, HStack, SimpleGrid } from '@chakra-ui/react'
+import * as React from 'react'
+import DiscordIcon from './docs/discord-logo'
+import { FaTwitter } from 'react-icons/fa'
+
+function CommunityCardItem({ children, accentColor, icon, href }) {
+  return (
+    <HStack
+      as='a'
+      href={href}
+      justify='center'
+      spacing='5'
+      borderWidth='1px'
+      py='3'
+      px='4'
+      rounded='lg'
+    >
+      <Box as='span' fontSize='xl' color={accentColor}>
+        {icon}
+      </Box>
+      <Text fontWeight='semibold'>{children}</Text>
+    </HStack>
+  )
+}
+
+export function JoinCommunityCards() {
+  return (
+    <SimpleGrid mt='8' columns={{ base: 1, md: 2 }} spacing='4'>
+      <CommunityCardItem
+        accentColor='#5865F2'
+        icon={<DiscordIcon />}
+        href='https://chakra-ui.com/discord'
+      >
+        Join the Discord
+      </CommunityCardItem>
+      <CommunityCardItem
+        accentColor='twitter.500'
+        icon={<FaTwitter />}
+        href='https://twitter.com/chakra_ui'
+      >
+        Follow us on Twitter
+      </CommunityCardItem>
+    </SimpleGrid>
+  )
+}
diff --git a/src/components/discord-strip.tsx b/src/components/discord-strip.tsx
@@ -4,7 +4,7 @@ import Container from './container'
 import DiscordIcon from './docs/discord-logo'
 import { t } from 'utils/i18n'
 
-function DiscordStrip(props: BoxProps) {
+export function DiscordStrip(props: BoxProps) {
   return (
     <Box bg='#5865F2' {...props}>
       <Container py='8'>
@@ -57,5 +57,3 @@ function DiscordStrip(props: BoxProps) {
     </Box>
   )
 }
-
-export default DiscordStrip
diff --git a/src/components/docs/discord-logo.tsx b/src/components/docs/discord-logo.tsx
@@ -4,12 +4,9 @@ const DiscordIcon = (props: IconProps) => (
   <Icon viewBox='0 0 48 48' {...props}>
     <g id='surface1615260'>
       <path
-        style={{
-          stroke: 'none',
-          fillRule: 'nonzero',
-          fill: 'rgb(100%,100%,100%)',
-          fillOpacity: 1,
-        }}
+        fill='currentColor'
+        stroke='none'
+        fillRule='nonzero'
         d='M 39.246094 10.175781 C 36.445312 8.890625 33.4375 7.941406 30.292969 7.398438 C 30.234375 7.390625 30.179688 7.414062 30.148438 7.46875 C 29.761719 8.15625 29.332031 9.050781 29.03125 9.757812 C 25.652344 9.253906 22.285156 9.253906 18.972656 9.757812 C 18.675781 9.035156 18.230469 8.15625 17.839844 7.46875 C 17.8125 7.414062 17.753906 7.390625 17.695312 7.398438 C 14.554688 7.941406 11.546875 8.886719 8.742188 10.175781 C 8.71875 10.1875 8.695312 10.203125 8.683594 10.226562 C 2.976562 18.75 1.414062 27.0625 2.183594 35.273438 C 2.183594 35.3125 2.207031 35.351562 2.238281 35.375 C 6.003906 38.140625 9.648438 39.816406 13.226562 40.929688 C 13.28125 40.945312 13.34375 40.925781 13.378906 40.878906 C 14.226562 39.722656 14.980469 38.503906 15.628906 37.222656 C 15.664062 37.148438 15.628906 37.058594 15.550781 37.027344 C 14.355469 36.574219 13.214844 36.019531 12.121094 35.390625 C 12.03125 35.339844 12.027344 35.21875 12.105469 35.15625 C 12.335938 34.984375 12.566406 34.804688 12.789062 34.625 C 12.828125 34.589844 12.882812 34.585938 12.929688 34.605469 C 20.132812 37.894531 27.925781 37.894531 35.042969 34.605469 C 35.089844 34.582031 35.144531 34.589844 35.1875 34.621094 C 35.40625 34.804688 35.636719 34.984375 35.871094 35.15625 C 35.949219 35.21875 35.945312 35.339844 35.859375 35.390625 C 34.761719 36.03125 33.621094 36.574219 32.425781 37.027344 C 32.347656 37.054688 32.3125 37.144531 32.347656 37.222656 C 33.011719 38.503906 33.765625 39.71875 34.59375 40.875 C 34.628906 40.925781 34.691406 40.945312 34.75 40.929688 C 38.34375 39.816406 41.988281 38.136719 45.753906 35.375 C 45.785156 35.351562 45.808594 35.3125 45.808594 35.273438 C 46.726562 25.78125 44.273438 17.539062 39.304688 10.230469 C 39.292969 10.203125 39.273438 10.1875 39.246094 10.175781 Z M 16.703125 30.273438 C 14.535156 30.273438 12.75 28.28125 12.75 25.839844 C 12.75 23.394531 14.5 21.402344 16.703125 21.402344 C 18.921875 21.402344 20.691406 23.410156 20.65625 25.839844 C 20.65625 28.28125 18.90625 30.273438 16.703125 30.273438 Z M 31.324219 30.273438 C 29.15625 30.273438 27.371094 28.28125 27.371094 25.839844 C 27.371094 23.394531 29.121094 21.402344 31.324219 21.402344 C 33.542969 21.402344 35.3125 23.410156 35.277344 25.839844 C 35.277344 28.28125 33.542969 30.273438 31.324219 30.273438 Z M 31.324219 30.273438 '
       />
     </g>
diff --git a/src/components/edit-page-button.tsx b/src/components/edit-page-button.tsx
@@ -1,25 +1,24 @@
-import { Box, Icon, Link, Stack, chakra } from '@chakra-ui/react'
-import * as React from 'react'
+import { chakra, Icon, Link, Stack } from '@chakra-ui/react'
 import { MdEdit } from 'react-icons/md'
 import { t } from 'utils/i18n'
 
 const EditPageLink = ({ href }: { href?: string }) => {
   return (
     <Link href={href} isExternal>
-      <Box fontSize='sm' textAlign='right'>
-        <Stack
-          display='inline-flex'
-          direction='row'
-          spacing={1}
-          align='center'
-          opacity={0.7}
-        >
-          <Icon as={MdEdit} mr='1' />
-          <chakra.span>
-            {t('component.edit-page-button.edit-this-page')}
-          </chakra.span>
-        </Stack>
-      </Box>
+      <Stack
+        fontSize='sm'
+        textAlign='right'
+        display='inline-flex'
+        direction='row'
+        spacing={1}
+        align='center'
+        opacity={0.7}
+      >
+        <Icon as={MdEdit} mr='1' />
+        <chakra.span>
+          {t('component.edit-page-button.edit-this-page')}
+        </chakra.span>
+      </Stack>
     </Link>
   )
 }
diff --git a/src/components/mdx-components/course-banner.tsx b/src/components/mdx-components/course-banner.tsx
@@ -1,45 +1,51 @@
-import { Box, LinkBox, LinkOverlay, SimpleGrid, Text } from '@chakra-ui/react'
+import { Box, SimpleGrid, Text } from '@chakra-ui/react'
 import NextImage from 'next/image'
 
 const CourseBanner = ({
   href,
   image,
   title,
-  description,
 }: {
   image: string
   title: string
   description: string
   href: string
 }) => {
   return (
-    <LinkBox role='group' mt='10'>
-      <Box mb='4' rounded='lg' overflow='hidden'>
-        <NextImage
-          src={image}
-          alt='Egghead Logo'
-          layout='responsive'
-          width='400'
-          height='200'
-        />
-      </Box>
-
-      <LinkOverlay href={href} target='_blank'>
+    <Box
+      display='block'
+      as='a'
+      borderWidth='1px'
+      target='_blank'
+      transition='box-shadow 0.1s ease-out'
+      href={href}
+      rounded='lg'
+      overflow='hidden'
+      _hover={{ shadow: 'md' }}
+    >
+      <NextImage
+        src={image}
+        alt='Egghead Logo'
+        layout='responsive'
+        width='400'
+        height='200'
+      />
+      <Box py='3' px='4'>
         <Text as='h3' fontWeight='semibold'>
           {title}
         </Text>
-      </LinkOverlay>
-
-      <Text mt='2' mb='4' fontSize='sm' color='fg-muted'>
-        {description}
-      </Text>
-    </LinkBox>
+      </Box>
+    </Box>
   )
 }
 
 export const FeaturesCourses = () => {
   return (
-    <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={{ base: '4', md: '8' }}>
+    <SimpleGrid
+      mt='10'
+      columns={{ base: 1, lg: 2 }}
+      spacing={{ base: '4', md: '8' }}
+    >
       <CourseBanner
         image='/course-banners/egghead-course.png'
         title='Egghead Course'
diff --git a/src/components/mdx-components/mdx-components.tsx b/src/components/mdx-components/mdx-components.tsx
@@ -22,6 +22,7 @@ import { VideoPlayer } from 'components/mdx-components/video-player'
 import SandpackEmbed from 'components/sandpack-embed'
 import { TutorialCodeBlock } from 'components/tutorial/tutorial-code-block'
 import { TutorialFileAction } from 'components/tutorial/tutorial-file-action'
+import { JoinCommunityCards } from 'components/community-card'
 
 const { Alert, AspectRatio, Box, chakra, Kbd } = Chakra
 
@@ -90,6 +91,7 @@ export const MDXComponents = {
   ColorPalettes,
   ColorWrapper,
   FeaturesCourses,
+  JoinCommunityCards,
   SandpackEmbed: (props) => (
     <Box my={6}>
       <SandpackEmbed {...props} />

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import Container from './container'`
`4`	`4`	`import DiscordIcon from './docs/discord-logo'`
`5`	`5`	`import { t } from 'utils/i18n'`
`6`	`6`
`7`		`-function DiscordStrip(props: BoxProps) {`
	`7`	`+export function DiscordStrip(props: BoxProps) {`
`8`	`8`	`return (`
`9`	`9`	`<Box bg='#5865F2' {...props}>`
`10`	`10`	`<Container py='8'>`
`@@ -57,5 +57,3 @@ function DiscordStrip(props: BoxProps) {`
`57`	`57`	`</Box>`
`58`	`58`	`)`
`59`	`59`	`}`
`60`		`-`
`61`		`-export default DiscordStrip`