pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

refactor: reduce code duplication

Browse source
This commit is contained in:
Kim, Jimin 2023-08-08 00:35:48 +09:00
parent e058955a11
commit d4eef3d0dd
Signed by: pomp
GPG key ID: CE1DDB8A4A765403
1 changed files with 8 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

13
apps/portfolio/src/components/Badge/Badge.tsx
View file

@ -6,6 +6,9 @@ interface BadgeProps {
slug: string
}
const sharedBadgeStyles = "mb-2 mr-2 flex w-fit items-center px-2 py-1 text-xs"
const sharedInnerBadgeStyles = "badge mr-1 inline-block w-6 align-middle"
export default async function Badge({ slug }: BadgeProps) {
const badgeData: BadgeType = await import(
`@developomp-site/content/dist/icons/${slug}.json`
@ -13,8 +16,8 @@ export default async function Badge({ slug }: BadgeProps) {
if (!badgeData)
return (
<div className="mb-2 mr-2 flex w-fit items-center px-2 py-1 text-xs">
<div className="badge mr-1 inline-block w-6 align-middle" />
<div className={sharedBadgeStyles}>
<div className={sharedInnerBadgeStyles} />
<span>Loading...</span>
</div>
)
@ -22,16 +25,16 @@ export default async function Badge({ slug }: BadgeProps) {
return (
<div
style={{ backgroundColor: badgeData.hex }}
className={`mb-2 mr-2 flex w-fit items-center px-2 py-1 text-xs ${
className={`${sharedBadgeStyles} ${
badgeData.isDark
? "text-dark-text-default"
: "text-light-text-default"
}`}
>
<div
className={`${
className={`${sharedInnerBadgeStyles} ${
badgeData.isDark ? "dark-badge" : "light-badge"
} badge mr-1 inline-block w-6 align-middle`}
}`}
dangerouslySetInnerHTML={{ __html: badgeData.svg }}
/>
<span>{badgeData.title}</span>