dfsyncjs.github.io/src/components/ProjectBadges/ProjectBadges.tsx at 579be2ff3cf68ba7159676a85b3b73f9fe728296 · dfsyncjs/dfsyncjs.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import { Stack, Box, Link } from '@mui/material';

const packageName = '@dfsync/client';

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 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>
    </Stack>
  );
};