From eb368790f0ed57efa778e0b025017df3963d7781 Mon Sep 17 00:00:00 2001
From: Konrad Szwarc <konrad.szwarc.dev@gmail.com>
Date: Sat, 22 Oct 2022 12:38:53 +0200
Subject: [PATCH] Create Tag component (#52)

---
 src/components/atoms/icon.tsx  |  4 +++-
 src/components/atoms/tag.astro | 21 +++++++++++++++++++++
 src/pages/playground/tag.astro | 11 +++++++++++
 src/types/common.ts            |  8 ++++----
 src/types/icon.ts              |  2 +-
 5 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 src/components/atoms/tag.astro
 create mode 100644 src/pages/playground/tag.astro

diff --git a/src/components/atoms/icon.tsx b/src/components/atoms/icon.tsx
index d330cc6..b37b2fc 100644
--- a/src/components/atoms/icon.tsx
+++ b/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;
 }
diff --git a/src/components/atoms/tag.astro b/src/components/atoms/tag.astro
new file mode 100644
index 0000000..123b9ff
--- /dev/null
+++ b/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>
diff --git a/src/pages/playground/tag.astro b/src/pages/playground/tag.astro
new file mode 100644
index 0000000..afdcfd3
--- /dev/null
+++ b/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>
diff --git a/src/types/common.ts b/src/types/common.ts
index 77c648c..b6a5d99 100644
--- a/src/types/common.ts
+++ b/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;
 }
diff --git a/src/types/icon.ts b/src/types/icon.ts
index 1cafe9b..dcf971a 100644
--- a/src/types/icon.ts
+++ b/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']>}`;
 }>;