rename protocols to badges

asyncapi · Oct 5, 2023 · c1b493e · c1b493e
1 parent 63f097c
commit c1b493e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/apps/design-system/src/components/AppCard.stories.tsx b/apps/design-system/src/components/AppCard.stories.tsx
@@ -19,6 +19,7 @@ export const CodeEditor: Story = {
     isActive: true,
     name: 'User Registration',
     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eucondimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentumurna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuerefermentum urna, eu condimentum maur",
-    protocols: ['http', 'kafka', 'websocket'],
+    badges: ['http', 'kafka', 'websocket'],
+    isServer: true
   },
 }
diff --git a/packages/ui/components/AppCard.tsx b/packages/ui/components/AppCard.tsx
@@ -1,25 +1,29 @@
-import { Protocol, ProtocolBadge } from './ProtocolBadge';
+import { Info, ServiceInfoBadge } from './ServiceInfoBadge';
 
 interface AppCardProps {
   isActive?: boolean;
   name: string;
   description: string;
-  protocols: Protocol[]
+  badges: Info[];
+  isClient: boolean;
+  isServer: boolean;
   className?: string;
 }
 
-export const AppCard = ({isActive = false, name, description, protocols, className}:AppCardProps) => {
+export const AppCard = ({isActive = false, name, description, badges, className, isClient, isServer}:AppCardProps) => {
   return (
     <>
       <div
         className={`bg-gray-800 border-gray-800 rounded-lg w-[523px] border-2 ${className} ${
-          isActive ? ' border-pink-800/30 shadow-service-card' : ''
+          isActive ? ' border-pink-800/30 shadow-active' : ''
         }`}
       >
         <div className="flex flex-col gap-2 px-5 py-3">
           <h3 className="text-base font-medium text-gray-100">{name}</h3>
           <div className='flex gap-1'>
-            {protocols.map((protocol, index) => (<ProtocolBadge protocol={protocol} key={index} />))}
+            {isClient && <ServiceInfoBadge info='client' className='mr-2'/>}
+            {isServer && <ServiceInfoBadge info='server' className='mr-2'/>}
+            {badges.map((badge, index) => (<ServiceInfoBadge info={badge} key={index} />))}
           </div>
         </div>
         <div className="w-full h-px bg-gray-700"></div>

diff --git a/packages/ui/components/ServiceInfoBadge.tsx b/packages/ui/components/ServiceInfoBadge.tsx
@@ -1,7 +1,7 @@
 import type { FunctionComponent } from 'react'
 import { AMQPIcon, AWSSNSIcon, AWSSQSIcon, ClientIcon, GooglePubSubIcon, IBMMQIcon, KafkaIcon, MQTTIcon, NATSIcon, PulsarIcon, RedisIcon, ServerIcon, SolaceIcon, StompIcon, WebSocketIcon } from './icons'
 
-export type Info = 'http' | 'kafka' | 'websocket' | 'amqp' | 'mqtt' | 'googlepubsub' | 'ibmmq' | 'nats' | 'pulsar' | 'redis' | 'sns' | 'sqs' | 'solace' | 'stomp'
+export type Info = 'http' | 'kafka' | 'websocket' | 'amqp' | 'mqtt' | 'googlepubsub' | 'ibmmq' | 'nats' | 'pulsar' | 'redis' | 'sns' | 'sqs' | 'solace' | 'stomp' | 'client' | 'server'
 interface ServiceInfoBadgeProps {
   className?: string
   info: Info

diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
@@ -6,7 +6,7 @@ module.exports = {
   theme: {
     extend: {
       boxShadow: {
-        'service-card': '0px 0px 29px 0px rgba(190, 24, 93, 0.50)',
+        active: '0px 0px 29px 0px rgba(190, 24, 93, 0.50)',
       },
     },
   }