79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
import React from "react";
|
||
|
||
interface BadgeProps {
|
||
href?: string;
|
||
children: React.ReactNode;
|
||
style?: React.CSSProperties;
|
||
}
|
||
|
||
function Badge({ href, children, style }: BadgeProps) {
|
||
const base = (
|
||
<div
|
||
className="flex items-center justify-center border border-white/40 text-center font-mono leading-tight select-none"
|
||
style={{ width: 88, height: 31, fontSize: 9, ...style }}
|
||
>
|
||
{children}
|
||
</div>
|
||
);
|
||
|
||
if (href) {
|
||
return (
|
||
<a href={href} target="_blank" rel="noopener noreferrer" className="hover:opacity-80 transition-opacity">
|
||
{base}
|
||
</a>
|
||
);
|
||
}
|
||
return base;
|
||
}
|
||
|
||
export default function Badges() {
|
||
return (
|
||
<div className="flex flex-wrap gap-1.5">
|
||
<Badge
|
||
href="https://nextjs.org"
|
||
style={{ background: "linear-gradient(135deg, #0d0d0d, #1a1a2e)", color: "#7dd3fc", borderColor: "#334155" }}
|
||
>
|
||
<span>⬛ Next.js</span>
|
||
</Badge>
|
||
|
||
<Badge
|
||
href="https://bun.sh"
|
||
style={{ background: "linear-gradient(135deg, #1a0a00, #2d1500)", color: "#fb923c", borderColor: "#7c2d12" }}
|
||
>
|
||
🍞 Powered by Bun
|
||
</Badge>
|
||
|
||
<Badge
|
||
style={{ background: "linear-gradient(135deg, #0c1a3a, #1e3a6e)", color: "#93c5fd", borderColor: "#1e40af" }}
|
||
>
|
||
<div>
|
||
<div>Best viewed</div>
|
||
<div>1024×768</div>
|
||
</div>
|
||
</Badge>
|
||
|
||
<Badge
|
||
href="/feed.xml"
|
||
style={{ background: "linear-gradient(135deg, #431407, #7c2d12)", color: "#fde68a", borderColor: "#b45309" }}
|
||
>
|
||
📡 Valid RSS
|
||
</Badge>
|
||
|
||
<Badge
|
||
style={{ background: "linear-gradient(135deg, #0f172a, #1e1b4b)", color: "#c4b5fd", borderColor: "#4c1d95" }}
|
||
>
|
||
Made with ♥
|
||
</Badge>
|
||
|
||
<Badge
|
||
style={{ background: "linear-gradient(135deg, #0369a1, #0ea5e9)", color: "white", borderColor: "#38bdf8" }}
|
||
>
|
||
<div>
|
||
<div style={{ fontSize: 8 }}>✦ Frutiger</div>
|
||
<div style={{ fontSize: 8 }}>Aero ✦</div>
|
||
</div>
|
||
</Badge>
|
||
</div>
|
||
);
|
||
}
|