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