adding application badge

src/components/Badges/ApplicationBadge/ApplicationBadge.mdx

@@ -0,0 +1,26 @@
+import { Meta, Canvas, Story, Description, Controls, Stories } from "@storybook/blocks";
+
+import { ApplicationBadge } from "./ApplicationBadge";
+import * as ApplicationBadgeStories from "./ApplicationBadge.stories";
+
+<Meta
+  title="Components/ApplicationBadge"
+  component={ApplicationBadge}
+  of={ApplicationBadgeStories}
+/>
+
+# ApplicationBadge
+
+The `ApplicationBadge` component is a UI element that indicates either the status of an Application. It supports various states, each represented by a distinct badge.
+
+# Example
+
+<Story of={ApplicationBadgeStories.PendingBadge} />
+
+# Controls
+
+<Controls of={ApplicationBadgeStories.PendingBadge} />
+
+# Other variations
+
+<Stories />

src/components/Badges/ApplicationBadge/ApplicationBadge.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { ApplicationBadge, ApplicationStatus } from "./ApplicationBadge";
+
+const meta: Meta<typeof ApplicationBadge> = {
+  title: "Components/ApplicationBadge",
+  component: ApplicationBadge,
+};
+
+export default meta;
+type Story = StoryObj<typeof ApplicationBadge>;
+
+export const PendingBadge: Story = {
+  argTypes: {
+    status: {
+      control: "select",
+      options: Object.values(ApplicationStatus),
+      description: "The Application Status.",
+    },
+    // badge: {
+    //   control: "select",
+    //   options: Object.values(ApplicationStatus),
+    //   description: "The application status",
+    // },
+    // Exclude the type from the controls
+    // status: {
+    //   table: {
+    //     disable: true,
+    //   },
+    // },
+  },
+  args: {
+    status: ApplicationStatus.Pending,
+  },
+};
+
+export const ApprovedBadge: Story = {
+  args: {
+    status: ApplicationStatus.Approved,
+  },
+  parameters: {
+    docs: {
+      storyDescription: "Displays the `Approved` Application status badge.",
+    },
+  },
+};
+
+export const RejectedBadge: Story = {
+  args: {
+    status: ApplicationStatus.Rejected,
+  },
+  parameters: {
+    docs: {
+      storyDescription: "Displays the `Rejected` Application status badge.",
+    },
+  },
+};

src/components/Badges/ApplicationBadge/ApplicationBadge.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+
+import { tv } from "tailwind-variants";
+import { match } from "ts-pattern";
+
+import { Badge } from "@/primitives/Badge/Badge";
+
+export enum ApplicationStatus {
+  Pending = "pending",
+  Approved = "approved",
+  Rejected = "rejected",
+}
+
+export const ApplicationBadgeVariants = tv({
+  variants: {
+    variant: {
+      pending: "border-transparent bg-yellow-100 text-black",
+      approved: "border-transparent bg-green-100 text-black",
+      rejected: "border-transparent bg-red-100 text-black",
+    },
+  },
+});
+
+interface ApplicationBadgeProps {
+  status: ApplicationStatus;
+}
+
+export const ApplicationBadge: React.FC<ApplicationBadgeProps> = (props) => {
+  const { variant, text } = match(props)
+    .with({ status: ApplicationStatus.Pending }, () => ({
+      variant: ApplicationBadgeVariants({ variant: "pending" }),
+      text: "Pending",
+    }))
+    .with({ status: ApplicationStatus.Approved }, () => ({
+      variant: ApplicationBadgeVariants({ variant: "approved" }),
+      text: "Approved",
+    }))
+    .with({ status: ApplicationStatus.Rejected }, () => ({
+      variant: ApplicationBadgeVariants({ variant: "rejected" }),
+      text: "Rejected",
+    }))
+
+    .otherwise(() => ({
+      variant: "border border-red-400 bg-white text-red-400",
+      text: "Error: Invalid Application Status",
+    }));
+
+  return <Badge className={variant}>{text}</Badge>;
+};