tsx

import Translate from '@docusaurus/Translate'
import GitHubCalendar from 'react-github-calendar'

import { useColorMode } from '@docusaurus/theme-common'
import { Icon } from '@iconify/react'

interface GithubProps {
  className?: string
}

export default function Github({ className }: GithubProps) {
  const { isDarkTheme } = useColorMode()

    // highlight-start
  const githubStatsUrl = (type: 'overview' | 'languages') =>
    `https://raw.githubusercontent.com/kuizuo/github-stats/master/generated/${type}.svg#gh-${
      isDarkTheme ? 'dark' : 'light'
    // highlight-end
    }-mode-only`
  return (
    <div className={className}>
        // highlight-next-line
      <h2 className="mb-2 flex items-center gap-1 justify-center md:justify-start md:px-4 text-base">
        <Icon icon="ri:github-line" />
        <Translate id="homepage.feature.github.title">Github</Translate>
      </h2>
      // highlight-start
      <div className="relative flex w-full flex-col items-center justify-center overflow-hidden bg-background">
        <div className="mb-4 flex w-full justify-between gap-4 px-4">
          <img src={githubStatsUrl('overview')} alt="GitHub Overview Stats" />
          <img src={githubStatsUrl('languages')} alt="GitHub Languages Stats" />
      // highlight-end
        </div>
        <GitHubCalendar username="kuizuo" blockSize={11} colorScheme={isDarkTheme ? 'dark' : 'light'} />
      </div>
    </div>
  )
}

tsx

import Translate from '@docusaurus/Translate'
import features from '@site/data/features'
import { BentoGrid, BentoGridItem } from '../../magicui/bento-grid'
import { Section } from '../Section'
// highlight-start
import Github from './Github'
import Skill from './Skill'
// highlight-end

export default function FeaturesSection() {
  return (
    <Section title={<Translate id="homepage.feature.title">🐱‍🚀 个人特点</Translate>}>
      <BentoGrid className="mx-auto w-full">
        {features.map((item, i) => (
          <BentoGridItem
            key={i}
            title={item.title}
            description={item.description}
            header={item.header}
            icon={item.icon}
        // highlight-next-line
            className={i === 3 || i === 6 ? 'md:col-span-2' : ''}
          />
        ))}
      </BentoGrid>

        // highlight-next-line
      <div className="mt-4 grid grid-cols-1 justify-center gap-4 md:grid-cols-6 md:grid-rows-2 max-md:px-4">
        <Skill className="md:col-span-2 md:row-span-2" />
        <Github className="h-full md:col-span-4 md:row-span-2" />
        // highlight-next-line
      </div>
    </Section>
  )
}