From 7df8e36633c6c7fce7d847f84bbebe89fa0667c9 Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Mon, 4 Mar 2024 21:22:38 +0100
Subject: [PATCH] init Quote Component

---
 src/components/quote/Quote.stories.tsx | 28 ++++++++++++++++++++++
 src/components/quote/Quote.style.scss  | 21 ++++++++++++++++
 src/components/quote/Quote.tsx         | 33 ++++++++++++++++++++++++++
 3 files changed, 82 insertions(+)
 create mode 100644 src/components/quote/Quote.stories.tsx
 create mode 100644 src/components/quote/Quote.style.scss
 create mode 100644 src/components/quote/Quote.tsx

diff --git a/src/components/quote/Quote.stories.tsx b/src/components/quote/Quote.stories.tsx
new file mode 100644
index 00000000..28f84429
--- /dev/null
+++ b/src/components/quote/Quote.stories.tsx
@@ -0,0 +1,28 @@
+import {Meta, StoryObj} from "@storybook/react";
+import Menu from "../menu/Menu";
+import {Placement} from "react-aria";
+import {Quote} from "./Quote";
+import React from "react";
+
+const meta: Meta = {
+    title: "Quote",
+    component: Quote,
+}
+
+export default meta;
+
+type MenuStory = StoryObj
+
+
+export const MenuAccount: MenuStory = {
+    render: (args) => {
+        return <Quote name={"Name"} logo={"https://cdn-icons-png.flaticon.com/512/3135/3135715.png"}  position={"Position"}>
+            My favorite UX feedback from customers is:
+            "How is the app so fast?"
+            Because we’ve built on Next.js and Vercel since day one, our pages load in an instant,
+            which is important when it comes to mission-critical software.
+        </Quote>
+    }
+}
+
+
diff --git a/src/components/quote/Quote.style.scss b/src/components/quote/Quote.style.scss
new file mode 100644
index 00000000..fd9b9e42
--- /dev/null
+++ b/src/components/quote/Quote.style.scss
@@ -0,0 +1,21 @@
+.quote {
+
+  &__text {
+    &:after {
+      right: 0;
+      top: 0;
+      position: relative;
+      content: "\”";
+    }
+    &:before {
+      right: 0;
+      top: 0;
+      position: relative;
+      content: "\”";
+    }
+  }
+
+  &__img {
+    width: 2rem;
+  }
+}
\ No newline at end of file
diff --git a/src/components/quote/Quote.tsx b/src/components/quote/Quote.tsx
new file mode 100644
index 00000000..20063ca2
--- /dev/null
+++ b/src/components/quote/Quote.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import {TablerIconsProps} from "@tabler/icons-react";
+import Card from "../card/Card";
+import "./Quote.style.scss"
+
+export interface QuoteType {
+    children: React.ReactNode,
+    logo: string,
+    name: string,
+    position: string,
+}
+
+
+export interface QuoteLogo {
+    children: React.ReactElement<TablerIconsProps>
+}
+
+export const Quote: React.FC<QuoteType> = (props) => {
+    const {logo, children} = props;
+    return <Card>
+        <div className={"quote"}>
+            <Card.Section>
+                <div className={"quote__text"}>
+                    {children}
+                </div>
+            </Card.Section>
+            <Card.Section>
+                <img className={"quote__img"} src={logo} alt={"logo"}/>
+            </Card.Section>
+
+        </div>
+    </Card>
+}
\ No newline at end of file