update github links, add badges

Author: romanindev

src/components/Footer/Footer.tsx

@@ -31,7 +31,7 @@ export const Footer = () => {
               npm
             </Link>
             <Link
-              href="https://github.com/dfsyncjs/dfsync"
+              href="https://github.com/dfsyncjs/dfsync/tree/main/packages/client"
               target="_blank"
               rel="noreferrer"
               underline="hover"

src/components/Header/Header.tsx

@@ -33,7 +33,7 @@ export const Header = () => {
             </Button>
             <Button
               color="inherit"
-              href="https://github.com/dfsyncjs/dfsync"
+              href="https://github.com/dfsyncjs/dfsync/tree/main/packages/client"
               target="_blank"
               rel="noreferrer"
               startIcon={<GitHubIcon />}

src/components/Hero/Hero.tsx

@@ -1,6 +1,9 @@
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import ListIcon from '@mui/icons-material/List';
 import { Box, Button, Chip, Container, Stack, Typography } from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
 import { InstallCommand } from '../InstallCommand/InstallCommand';
+import { ProjectBadges } from '../ProjectBadges/ProjectBadges.tsx';
 
 export const Hero = () => {
   return (
@@ -37,6 +40,8 @@ export const Hero = () => {
               }}
             />
 
+            <ProjectBadges />
+
             <Typography
               variant="h6"
               color="text.secondary"
@@ -64,12 +69,11 @@ export const Hero = () => {
               View on npm
             </Button>
             <Button
+              component={RouterLink}
               variant="outlined"
               size="medium"
-              href="https://github.com/dfsyncjs/dfsync/blob/main/packages/client/README.md"
-              target="_blank"
-              rel="noreferrer"
-              endIcon={<OpenInNewIcon />}
+              to="/docs"
+              startIcon={<ListIcon />}
             >
               Documentation
             </Button>
@@ -82,7 +86,7 @@ export const Hero = () => {
               mt: 3,
               width: '100%',
               p: { xs: 3, md: 4 },
-              borderRadius: 4,
+              borderRadius: 1,
               bgcolor: 'background.paper',
               border: '1px solid',
               borderColor: 'divider',

src/components/InstallCommand/InstallCommand.tsx

@@ -23,7 +23,7 @@ export const InstallCommand = () => {
         bgcolor: 'background.paper',
         border: '1px solid',
         borderColor: 'divider',
-        borderRadius: 3,
+        borderRadius: 1,
         px: 3,
         py: 2,
         maxWidth: 500,

src/components/ProjectBadges/ProjectBadges.tsx

@@ -0,0 +1,65 @@
+import { Stack, Box, Link } from '@mui/material';
+
+const packageName = '@dfsync/client';
+const repoName = 'dfsyncjs/dfsync';
+
+export const ProjectBadges = () => {
+  return (
+    <Stack direction="row" spacing={1.5} alignItems="center" flexWrap="wrap" sx={{ mt: 2 }}>
+      {/* npm version */}
+      <Link
+        href={`https://www.npmjs.com/package/${packageName}`}
+        target="_blank"
+        rel="noreferrer"
+        underline="none"
+        sx={{ lineHeight: 1 }}
+      >
+        <Box
+          component="img"
+          src={`https://img.shields.io/npm/v/${encodeURI(packageName)}`}
+          alt="npm version"
+          sx={{ height: 20 }}
+        />
+      </Link>
+
+      {/* npm weekly downloads */}
+      <Link
+        href={`https://www.npmjs.com/package/${packageName}`}
+        target="_blank"
+        rel="noreferrer"
+        underline="none"
+        sx={{ lineHeight: 1 }}
+      >
+        <Box
+          component="img"
+          src={`https://img.shields.io/npm/dw/${encodeURI(packageName)}`}
+          alt="npm downloads"
+          sx={{ height: 20 }}
+        />
+      </Link>
+
+      {/* github stars */}
+      <Link
+        href={`https://github.com/${repoName}/tree/main/packages/client`}
+        target="_blank"
+        rel="noreferrer"
+        underline="none"
+        sx={{ lineHeight: 1 }}
+      >
+        <Box
+          component="img"
+          src={`https://img.shields.io/github/stars/${repoName}`}
+          alt="github stars"
+          sx={{ height: 20 }}
+        />
+      </Link>
+
+      <Box
+        component="img"
+        src={`https://img.shields.io/github/license/${repoName}`}
+        alt="license"
+        sx={{ height: 20 }}
+      />
+    </Stack>
+  );
+};

src/components/index.ts

@@ -2,3 +2,4 @@ export { Features } from './Features/Features';
 export { Footer } from './Footer/Footer';
 export { Header } from './Header/Header';
 export { Hero } from './Hero/Hero';
+export { ProjectBadges } from './ProjectBadges/ProjectBadges';