Add AppQuote component

src/styles/app-quote/AppQuote.scss

@@ -0,0 +1,6 @@
+@use "design-system/colors" as *;
+
+.app-quote {
+  border-left: 3px solid $color-primary;
+  padding: 6px 6px 6px 18px;
+}

src/styles/app-quote/AppQuote.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import AppQuote from "@/styles/app-quote/AppQuote";
+import { AppQuoteProps } from "@/styles/app-quote/AppQuote.types";
+
+const meta: Meta<AppQuoteProps> = {
+  title: "AppQuote",
+  component: AppQuote,
+  tags: ["autodocs"],
+  args: {
+    children:
+      "Do you have a design in mind for your blog? Whether you prefer a trendy postcard look or you’re going for a more editorial style blog - there’s a stunning layout for everyone. ",
+  },
+  decorators: Story => {
+    return (
+      <div style={{ maxWidth: "500px" }}>
+        <Story />
+      </div>
+    );
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<AppQuoteProps>;
+
+export const Default: Story = {};

src/styles/app-quote/AppQuote.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+
+import classNames from "classnames";
+
+import "@/styles/app-quote/AppQuote.scss";
+import { AppQuoteProps } from "@/styles/app-quote/AppQuote.types";
+import AppTypography from "@/styles/app-typography/AppTypography";
+
+const AppQuote = forwardRef<HTMLQuoteElement, AppQuoteProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <AppTypography
+        ref={ref}
+        as="blockquote"
+        variant="accent"
+        oblique
+        className={classNames("app-quote", className)}
+        {...props}
+      />
+    );
+  }
+);
+
+AppQuote.displayName = "AppQuote";
+
+export default AppQuote;

src/styles/app-quote/AppQuote.types.ts

@@ -0,0 +1,3 @@
+import { ComponentPropsWithoutRef } from "react";
+
+export type AppQuoteProps = ComponentPropsWithoutRef<"blockquote">;