npm install @r3-dev/badge
yarn add @r3-dev/badge
pnpm add @r3-dev/badge
// components/badge.tsx
import '@r3-dev/badge'
declare global {
namespace JSX {
interface IntrinsicElements {
'r3-badge': React.DetailedHTMLProps<
React.AnchorHTMLAttributes<HTMLAnchorElement>,
HTMLAnchorElement
>
}
}
}
export default function Badge() {
return (
<r3-badge
href="https://www.upwork.com/agencies/~01e5f1563365e3c1b5/"
style={{ position: 'fixed', top: '1rem', right: '1rem' }}
/>
)
}
// _app.tsx
import dynamic from 'next/dynamic'
import type { AppProps } from 'next/app'
const Badge = dynamic(() => import('../components/badge'), {
ssr: false
})
export default function App({
Component,
pageProps: { ...pageProps }
}: AppProps) {
return (
<>
<Badge />
<Component {...pageProps} />
</>
)
}<!DOCTYPE html>
<html>
<head>
<!-- import badge from CDN -->
<script src="https://cdn.jsdelivr.net/npm/@r3-dev/badge"></script>
</head>
<body>
<!-- render badge -->
<r3-badge
href="https://www.upwork.com/agencies/~01e5f1563365e3c1b5/"
style="position: fixed; top: 1rem; right: 1rem;"
></r3-badge>
</body>
</html>r3-badge {
/* default colors */
/* --bg-badge: #000; */
--text-badge: #fff;
--bg-logo: #00a621;
--text-logo: #fff;
/* override */
--bg-badge: darkblue;
/* light shadow */
filter: drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.5));
/* dark shadow */
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5));
}
/* dark mode */
@media (prefers-color-scheme: dark) {
r3-badge {
--bg-badge: #fff;
--text-badge: #000;
}
}
/* light mode */
@media (prefers-color-scheme: light) {
r3-badge {
--bg-badge: #000;
--text-badge: #fff;
}
}
<a href="https://www.upwork.com/o/companies/~01e5f1563365e3c1b5/">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://r3-dev.github.io/brand/badge-light.svg">
<img src="https://r3-dev.github.io/brand/badge-dark.svg" />
</picture>
</a>