ErrorCard created

src/components/ErrorCard/ErrorCard.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import ErrorCard from './ErrorCard';
+
+const meta = {
+  title: 'Components/ErrorCard',
+  component: ErrorCard,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+    }
+  },
+  tags: ["autodocs"]
+}satisfies Meta<typeof ErrorCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    title: 'Error fetching training data',
+  },
+}

src/components/ErrorCard/ErrorCard.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { IErrorCard } from "./types";
+
+/**
+ * An error card that displays the error message
+ */
+
+const ErrorCard: React.FC<IErrorCard> = ({ title }) => {
+    return (
+        <div className="bg-white text-aci-red text-left px-5 py-1 rounded-xl shadow-lg text-text font-bold">
+            {title}
+        </div>
+    );
+};
+
+export default ErrorCard;

src/components/ErrorCard/index.ts

@@ -0,0 +1 @@
+export { default as ErrorCard} from './ErrorCard';

src/components/ErrorCard/types.ts

@@ -0,0 +1,6 @@
+export interface IErrorCard{
+    /**
+     * The text prop of the ErrorCard
+     */
+    title: string;
+}

src/components/index.ts

@@ -3,3 +3,4 @@ export { Icon } from './Icon';
 export { Button } from './Button';
 export { ItemSubitem } from './ItemSubitem';
 export { CompleteButton } from './CompleteButton';
+export { ErrorCard } from './ErrorCard';