add AppCard component

apps/design-system/src/components/AppCard.stories.tsx

@@ -0,0 +1,24 @@
+import { StoryObj, Meta } from '@storybook/react'
+
+import { AppCard } from '@asyncapi/studio-ui'
+
+const meta: Meta<typeof AppCard> = {
+  component: AppCard,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark'
+    }
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof AppCard>
+export const CodeEditor: Story = {
+  args: {
+    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'],
+  },
+}

packages/ui/components/AppCard.tsx

@@ -0,0 +1,33 @@
+import { Protocol, ProtocolBadge } from './ProtocolBadge';
+
+interface AppCardProps {
+  isActive?: boolean;
+  name: string;
+  description: string;
+  protocols: Protocol[]
+  className?: string;
+}
+
+export const AppCard = ({isActive = false, name, description, protocols, className}: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' : ''
+        }`}
+      >
+        <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} />))}
+          </div>
+        </div>
+        <div className="w-full h-px bg-gray-700"></div>
+        <div className="px-5 py-[14px]">
+          <p className="text-sm text-gray-400 line-clamp-6">{description}
+          </p>
+        </div>
+      </div>
+    </>
+  )
+}

packages/ui/components/index.tsx

@@ -11,4 +11,5 @@ export * from './ProtocolBadge'
 export * from './Sidebar'
 export * from './SlideOver'
 export * from './Toolbar'
+export * from './AppCard'
 export { default as Tooltip } from './Tooltip'

packages/ui/tailwind.config.js

@@ -1,6 +1,13 @@
-const sharedConfig = require('tailwind-config/tailwind.config.js');
+import sharedConfig from 'tailwind-config/tailwind.config.js';
 
 module.exports = {
   content: ['./components/**/*.tsx'],
   presets: [sharedConfig],
+  theme: {
+    extend: {
+      boxShadow: {
+        'service-card': '0px 0px 29px 0px rgba(190, 24, 93, 0.50)',
+      },
+    },
+  }
 };