Create Tag component (#52)

src/components/atoms/icon.tsx

@@ -1,7 +1,9 @@
 import { Icon as IconComponent } from '@iconify-icon/react';
 
+import type { IconName } from '@/types/icon';
+
 export interface IconProps {
-  name?: string;
+  name?: IconName;
   color?: string;
   size: number;
 }

src/components/atoms/tag.astro

@@ -0,0 +1,21 @@
+---
+import type { IconName } from '@/types/icon';
+
+import Icon from './icon';
+
+export interface Props {
+  icon?: {
+    name: IconName;
+    color: string;
+  };
+}
+
+const {
+  props: { icon },
+} = Astro;
+---
+
+<div class="flex items-center w-fit h-6 px-2.5 rounded text-sm font-medium text-gray-700 bg-gray-100 gap-x-1.5">
+  {icon && <Icon client:load name={icon.name} color={icon.color} size={16} />}
+  <slot />
+</div>

src/pages/playground/tag.astro

@@ -0,0 +1,11 @@
+---
+import Tag from '@/atoms/tag.astro';
+---
+
+<div class="p-5">
+  <Tag>Tag text</Tag>
+</div>
+
+<div class="p-5">
+  <Tag icon={{ name: 'simple-icons:react', color: '#61DAFB' }}>Tag text</Tag>
+</div>

src/types/common.ts

@@ -1,4 +1,4 @@
-import type { Icon } from './icon';
+import type { IconName } from './icon';
 
 export type LocalImage = Promise<{ default: ImageMetadata }>;
 
@@ -9,13 +9,13 @@ export interface Detail {
 
 export interface Social {
   name: string;
-  icon: Icon;
+  icon: IconName;
   url: string;
 }
 
 export interface Tag {
   name: string;
-  icon?: Icon;
+  icon?: IconName;
   iconColor?: string;
   url?: string;
   description?: string;
@@ -23,5 +23,5 @@ export interface Tag {
 
 export interface SectionConfig {
   title: string;
-  icon: Icon;
+  icon: IconName;
 }

src/types/icon.ts

@@ -7,6 +7,6 @@ type IconSets = {
   'circle-flags': typeof import('@iconify/json/json/circle-flags.json');
 };
 
-export type Icon = ValueOf<{
+export type IconName = ValueOf<{
   [IconSet in keyof IconSets]: `${IconSet}:${StringKeyOf<IconSets[IconSet]['icons']>}`;
 }>;