move card and indicator into UI toolkit

libs/ui-toolkit/src/components/card/card.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Card } from './card';
+
+export default {
+  title: 'Card',
+  component: Card,
+} as ComponentMeta<typeof Card>;
+
+const Template: ComponentStory<typeof Card> = (args) => {
+  return <Card>Test</Card>;
+};
+
+export const Default = Template.bind({});
+Default.args = {};

libs/ui-toolkit/src/components/card/card.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+
+interface CardProps {
+  children: ReactNode;
+}
+
+export function Card({ children }: CardProps) {
+  return (
+    <div className="px-24 py-16 pr-64 border items-center">{children}</div>
+  );
+}

libs/ui-toolkit/src/components/card/index.tsx

@@ -0,0 +1 @@
+export * from './card';

libs/ui-toolkit/src/components/indicator/index.tsx

@@ -0,0 +1 @@
+export * from './indicator';

libs/ui-toolkit/src/components/indicator/indicator.stories.tsx

@@ -0,0 +1,31 @@
+import type { Story, Meta } from '@storybook/react';
+import { Indicator } from './indicator';
+
+export default {
+  component: Indicator,
+  title: 'Indicator',
+} as Meta;
+
+const Template: Story = (args) => <Indicator {...args} />;
+
+export const Default = Template.bind({});
+
+export const Highlight = Template.bind({});
+Highlight.args = {
+  variant: 'highlight',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  variant: 'success',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  variant: 'warning',
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  variant: 'danger',
+};

libs/ui-toolkit/src/components/indicator/indicator.tsx

@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import type { Variant } from '../../utils/intent';
+import { getVariantBackground } from '../../utils/intent';
+
+export const Indicator = ({ variant }: { variant?: Variant }) => {
+  const names = classNames(
+    'inline-block w-8 h-8 mb-[0.15rem] mr-8 rounded',
+    getVariantBackground(variant)
+  );
+  return <div className={names} />;
+};