Nejcraft/nej-react-components
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

udpate badge

Browse Source
This commit is contained in:
honzapatCZ 2025-01-13 18:57:16 +01:00
parent db786e3cd3
commit c39f9eff8b
2 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
Parts/Badge.js
View File

@ -1,17 +0,0 @@
import { useTranslation } from "react-i18next";
import tw, { styled } from "twin.macro";
import "styled-components/macro";
export function Badge({ color, text, ...props }) {
const colors = {
yellow: tw`bg-yellow-500`,
gray: tw`bg-gray-500`,
red: tw`bg-red-700`,
};
const realColor = (typeof(color) === "string" && color in colors) ? colors[color] : color;
return (
<p css={[tw`px-2 py-1 inline text-primary text-xs font-semibold uppercase rounded-full `, realColor]} {...props}>{text}</p>
);
}

18
Parts/Badge.tsx Normal file
View File

@ -0,0 +1,18 @@
import { useTranslation } from "react-i18next";
import tw from "twin.macro";
import "styled-components/macro";
import { ComponentProps, forwardRef } from "react";
export const Badge = forwardRef<HTMLParagraphElement, { color: string, text: string | number }>(({ color, text, ...props }, ref) => {
const colors = {
yellow: tw`bg-yellow-500`,
gray: tw`bg-gray-500`,
red: tw`bg-red-700`,
};
const realColor = (typeof (color) === "string" && color in colors) ? colors[color] : color;
return (
<p ref={ref} css={[tw`px-2 py-1 inline text-primary text-xs font-semibold uppercase rounded-full `, realColor]} {...props}>{text}</p>
);
});