From 24727feaa9da7ddd18295fa0527514bd51ef97cc Mon Sep 17 00:00:00 2001
From: Nathan Seva <thykof@protonmail.ch>
Date: Thu, 25 Jan 2024 14:52:54 +0100
Subject: [PATCH] improve tag component: children element

---
 src/components/Plugin/Plugin.stories.tsx |  2 +-
 src/components/Tag/Tag.stories.tsx       | 10 +++++-----
 src/components/Tag/Tag.test.tsx          | 12 ++++++------
 src/components/Tag/Tag.tsx               |  6 +++---
 src/components/Tooltip/Tooltip.tsx       |  2 +-
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/Plugin/Plugin.stories.tsx b/src/components/Plugin/Plugin.stories.tsx
index 8772e2fa..f4aa50ff 100644
--- a/src/components/Plugin/Plugin.stories.tsx
+++ b/src/components/Plugin/Plugin.stories.tsx
@@ -20,7 +20,7 @@ const argsOn = {
   topActionFunction: () => console.log('download'),
   title: `plugin name - 30 characters...`,
   subtitle: `Author's Name`,
-  tag: <Tag type="warning" content="beta" />,
+  tag: <Tag type="warning">Beta</Tag>,
   subtitleIcon: <Certificate />,
   version: '1.0.2',
   content: [
diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx
index 0e5af050..489665bd 100644
--- a/src/components/Tag/Tag.stories.tsx
+++ b/src/components/Tag/Tag.stories.tsx
@@ -7,15 +7,15 @@ export default {
 export const _Tag = {
   render: () => (
     <>
-      <Tag type={'default'} content={'default type'} />
+      <Tag type={'default'}>default type</Tag>
       <br />
-      <Tag type={'error'} content={'error type'} />
+      <Tag type={'error'}>error type</Tag>
       <br />
-      <Tag type={'success'} content={'success type'} />
+      <Tag type={'success'}>success type</Tag>
       <br />
-      <Tag type={'info'} content={'info type'} />
+      <Tag type={'info'}>info type</Tag>
       <br />
-      <Tag type={'warning'} content={'warning type'} />
+      <Tag type={'warning'}>warning type</Tag>
     </>
   ),
 };
diff --git a/src/components/Tag/Tag.test.tsx b/src/components/Tag/Tag.test.tsx
index e377483a..86a78104 100644
--- a/src/components/Tag/Tag.test.tsx
+++ b/src/components/Tag/Tag.test.tsx
@@ -4,7 +4,7 @@ import { Tag } from './Tag';
 
 describe('Components | Tag', () => {
   test('it should render', () => {
-    render(<Tag type="default" content="default type" />);
+    render(<Tag type="default">default type</Tag>);
 
     let tag = screen.getByTestId('tag');
 
@@ -12,7 +12,7 @@ describe('Components | Tag', () => {
   });
 
   test('it should have white class with 30% opacity', () => {
-    render(<Tag type="default" content="default type" />);
+    render(<Tag type="default">default type</Tag>);
 
     let tag = screen.getByTestId('tag');
 
@@ -20,7 +20,7 @@ describe('Components | Tag', () => {
   });
 
   test('it should have info-1 class', () => {
-    render(<Tag type="info" content="info type" />);
+    render(<Tag type="info">info type</Tag>);
 
     let tag = screen.getByTestId('tag');
 
@@ -28,7 +28,7 @@ describe('Components | Tag', () => {
   });
 
   test('it should have error class', () => {
-    render(<Tag type="error" content="error type" />);
+    render(<Tag type="error">error type</Tag>);
 
     let tag = screen.getByTestId('tag');
 
@@ -36,7 +36,7 @@ describe('Components | Tag', () => {
   });
 
   test('it should have success class', () => {
-    render(<Tag type="success" content="success type" />);
+    render(<Tag type="success">success type</Tag>);
 
     let tag = screen.getByTestId('tag');
 
@@ -44,7 +44,7 @@ describe('Components | Tag', () => {
   });
 
   test('it should have warning class', () => {
-    render(<Tag type="warning" content="warning type" />);
+    render(<Tag type="warning">warning type</Tag>);
 
     let tag = screen.getByTestId('tag');
 
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
index 9cf22054..e44b9282 100644
--- a/src/components/Tag/Tag.tsx
+++ b/src/components/Tag/Tag.tsx
@@ -4,12 +4,12 @@ import React from 'react';
 
 interface TagProps {
   type: string;
-  content: string;
+  children: React.ReactNode;
   customClass?: string;
 }
 
 export function Tag(props: TagProps) {
-  const { content, type, customClass } = props;
+  const { children, type, customClass } = props;
 
   let isDefault = type === 'default';
   let isInfo = type === 'info';
@@ -31,7 +31,7 @@ export function Tag(props: TagProps) {
       className={`${backgroundClass} mas-caption rounded-full w-fit px-3 py-1
         bg-opacity-30 ${typeColor} ${customClass}`}
     >
-      {content}
+      {children}
     </p>
   );
 }
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 455698ae..2128457a 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -27,7 +27,7 @@ export function Tooltip(props: TooltipProps) {
       {icon || defaultIcon}
       {showTooltip && (
         <div
-          className={`w-fit z-10 absolute bg-tertiary p-3 rounded-lg text-neutral ml-2 ${customClass} `}
+          className={`w-fit z-10 absolute bg-tertiary p-3 rounded-lg text-neutral ml-2 ${customClass}`}
         >
           {content}
         </div>