INN 2804 Refactor pill component (#1196)

* Replace tag by badge in dashboard

* Remove unused tag

* Rename Tag as Pill

* Remove TriggerPill components

* Consolidate trigger type

* Delete unused file

* Delete unused files

* Move HorizontalPillList to shared folder

* Update references

* Replace ref in Dev Server

* Change font-weight

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/apps/[externalID]/FunctionList.tsx

@@ -1,12 +1,11 @@
 import { useRef } from 'react';
 import { type Route } from 'next';
 import { Link } from '@inngest/components/Link';
+import { Pill, PillContent } from '@inngest/components/Pill';
 import { Table } from '@inngest/components/Table';
 import type { Function } from '@inngest/components/types/function';
 import { createColumnHelper, getCoreRowModel } from '@tanstack/react-table';
 
-import TriggerPill from '@/components/Pill/TriggerPill';
-
 type Fn = Pick<Function, 'name' | 'slug' | 'triggers'>;
 
 type Props = {
@@ -73,18 +72,16 @@ function useColumns({ envSlug }: { envSlug: string }) {
           <div className="flex gap-1">
             {triggers.map((trigger) => {
               return (
-                <TriggerPill
+                <Pill
                   href={
                     trigger.type === 'EVENT'
-                      ? `/env/${envSlug}/events/${encodeURIComponent(trigger.value)}`
+                      ? (`/env/${envSlug}/events/${encodeURIComponent(trigger.value)}` as Route)
                       : undefined
                   }
                   key={trigger.type + trigger.value}
-                  trigger={{
-                    type: trigger.type === 'EVENT' ? 'event' : 'schedule',
-                    value: trigger.value,
-                  }}
-                />
+                >
+                  <PillContent type={trigger.type}>{trigger.value}</PillContent>
+                </Pill>
               );
             })}
           </div>

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/LatestLogsList.tsx

@@ -2,10 +2,10 @@ import { type Route } from 'next';
 import Link from 'next/link';
 import { KeyIcon } from '@heroicons/react/20/solid';
 import { Button } from '@inngest/components/Button';
+import { Pill } from '@inngest/components/Pill';
 import { useQuery } from 'urql';
 
 import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
-import { Pill } from '@/components/Pill/Pill';
 import { Time } from '@/components/Time';
 import { graphql } from '@/gql';
 

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/page.tsx

@@ -1,16 +1,15 @@
 'use client';
 
 import { useState } from 'react';
-import { ChartBarIcon, CodeBracketSquareIcon } from '@heroicons/react/20/solid';
+import { ChartBarIcon } from '@heroicons/react/20/solid';
 import { Button } from '@inngest/components/Button';
 import { Link } from '@inngest/components/Link';
+import { HorizontalPillList, Pill, PillContent } from '@inngest/components/Pill';
 
 import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
 import SendEventButton from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/SendEventButton';
 import MiniStackedBarChart from '@/components/Charts/MiniStackedBarChart';
 import Header from '@/components/Header/Header';
-import HorizontalPillList from '@/components/Pill/HorizontalPillList';
-import { Pill } from '@/components/Pill/Pill';
 import LoadingIcon from '@/icons/LoadingIcon';
 import EventIcon from '@/icons/event.svg';
 import { useEventTypes } from '@/queries';
@@ -148,10 +147,8 @@ function EventTypesListPaginationPage({
                       functionSlug: function_.slug,
                     })}
                     key={function_.name}
-                    className="bg-white align-middle text-slate-600"
                   >
-                    <CodeBracketSquareIcon className="mr-1 h-3.5 w-3.5 text-indigo-500" />
-                    {function_.name}
+                    <PillContent type="FUNCTION">{function_.name}</PillContent>
                   </Pill>
                 ))}
               />

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/functions/FunctionTable.tsx

@@ -4,6 +4,8 @@ import { useMemo } from 'react';
 import { type Route } from 'next';
 import { ChartBarIcon, ExclamationCircleIcon } from '@heroicons/react/20/solid';
 import { Link } from '@inngest/components/Link';
+import { Pill, PillContent } from '@inngest/components/Pill';
+import { type Trigger } from '@inngest/components/types/trigger';
 import {
   createColumnHelper,
   flexRender,
@@ -13,7 +15,6 @@ import {
 
 import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
 import MiniStackedBarChart from '@/components/Charts/MiniStackedBarChart';
-import TriggerPill, { TRIGGER_TYPE, type Trigger } from '@/components/Pill/TriggerPill';
 import Placeholder from '@/components/Placeholder';
 import cn from '@/utils/cn';
 
@@ -140,15 +141,16 @@ function createColumns(environmentSlug: string) {
       cell: (info) => {
         return info.getValue().map((trigger) => {
           return (
-            <TriggerPill
-              key={trigger.value}
+            <Pill
               href={
-                trigger.type === TRIGGER_TYPE.event
-                  ? `/env/${environmentSlug}/events/${encodeURIComponent(trigger.value)}`
+                trigger.type === 'EVENT'
+                  ? (`/env/${environmentSlug}/events/${encodeURIComponent(trigger.value)}` as Route)
                   : undefined
               }
-              trigger={trigger}
-            />
+              key={trigger.value}
+            >
+              <PillContent type={trigger.type}>{trigger.value}</PillContent>
+            </Pill>
           );
         });
       },

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/functions/[slug]/layout.tsx

@@ -5,7 +5,6 @@ import { Badge } from '@inngest/components/Badge';
 
 import { useBooleanFlag } from '@/components/FeatureFlags/hooks';
 import Header, { type HeaderLink } from '@/components/Header/Header';
-import { Tag } from '@/components/Tag/Tag';
 import { useFunction } from '@/queries';
 import ArchiveFunctionButton from './ArchiveButton';
 import { InvokeButton } from './InvokeButton';
@@ -83,13 +82,15 @@ export default function FunctionLayout({ children, params }: FunctionLayoutProps
             </div>
           )
         }
-        tag={
+        badge={
           !emptyData && isArchived ? (
-            <Tag size="sm">Archived</Tag>
+            <Badge kind="solid" className="bg-slate-800 text-slate-400">
+              Archived
+            </Badge>
           ) : !emptyData && isPaused ? (
-            <Tag size="sm" className="text-amber-500">
+            <Badge kind="solid" className="bg-slate-800 text-amber-500">
               Paused
-            </Tag>
+            </Badge>
           ) : null
         }
       />