From eb5fa9b70163c69a0f94cf4c2e4c29b85ed27f66 Mon Sep 17 00:00:00 2001
From: fsoussand <fflloo98@me.com>
Date: Thu, 22 Jun 2023 09:21:38 +0200
Subject: [PATCH] create generic link component

---
 public/product_assets/images/white-arrow.svg |  4 +++
 src/components/ui/Buttons/AppLink.tsx        | 37 ++++++++++++++++++++
 src/pages/index.tsx                          | 10 ++----
 3 files changed, 44 insertions(+), 7 deletions(-)
 create mode 100644 public/product_assets/images/white-arrow.svg
 create mode 100644 src/components/ui/Buttons/AppLink.tsx

diff --git a/public/product_assets/images/white-arrow.svg b/public/product_assets/images/white-arrow.svg
new file mode 100644
index 0000000..6a428f8
--- /dev/null
+++ b/public/product_assets/images/white-arrow.svg
@@ -0,0 +1,4 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.2" d="M18.6714 16.2918C17.7237 17.7102 16.3767 18.8156 14.8006 19.4685C13.2246 20.1213 11.4904 20.2921 9.81735 19.9593C8.14426 19.6265 6.60744 18.805 5.40121 17.5988C4.19498 16.3926 3.37353 14.8557 3.04073 13.1826C2.70793 11.5096 2.87874 9.77536 3.53154 8.19935C4.18435 6.62334 5.28984 5.27629 6.70821 4.32857C4.43241 8.62718 16.0235 15.9416 18.6714 16.2918Z" fill="white"/>
+<path d="M11.5 2.15625C9.65198 2.15625 7.84547 2.70425 6.30889 3.73096C4.77232 4.75766 3.57471 6.21695 2.8675 7.9243C2.1603 9.63165 1.97526 11.5104 2.33579 13.3229C2.69632 15.1354 3.58623 16.8003 4.89298 18.107C6.19972 19.4138 7.86462 20.3037 9.67713 20.6642C11.4896 21.0247 13.3684 20.8397 15.0757 20.1325C16.783 19.4253 18.2423 18.2277 19.269 16.6911C20.2958 15.1545 20.8438 13.348 20.8438 11.5C20.8411 9.02269 19.8559 6.64759 18.1041 4.89586C16.3524 3.14413 13.9773 2.15887 11.5 2.15625ZM11.5 19.4062C9.9363 19.4062 8.4077 18.9426 7.10753 18.0738C5.80735 17.2051 4.79399 15.9703 4.19558 14.5256C3.59718 13.0809 3.44061 11.4912 3.74567 9.95757C4.05073 8.42391 4.80373 7.01515 5.90944 5.90944C7.01515 4.80373 8.42391 4.05073 9.95757 3.74567C11.4912 3.4406 13.0809 3.59717 14.5256 4.19558C15.9703 4.79398 17.2051 5.80735 18.0738 7.10752C18.9426 8.4077 19.4063 9.93629 19.4063 11.5C19.4039 13.5961 18.5701 15.6057 17.0879 17.0879C15.6057 18.5701 13.5961 19.4039 11.5 19.4062ZM15.6023 10.9915C15.6691 11.0582 15.7221 11.1375 15.7583 11.2248C15.7945 11.312 15.8131 11.4055 15.8131 11.5C15.8131 11.5945 15.7945 11.688 15.7583 11.7752C15.7221 11.8625 15.6691 11.9418 15.6023 12.0085L12.7273 14.8835C12.5924 15.0184 12.4095 15.0942 12.2188 15.0942C12.028 15.0942 11.8451 15.0184 11.7102 14.8835C11.5754 14.7486 11.4996 14.5657 11.4996 14.375C11.4996 14.1843 11.5754 14.0014 11.7102 13.8665L13.3589 12.2188H7.90625C7.71563 12.2188 7.53281 12.143 7.39802 12.0082C7.26323 11.8734 7.1875 11.6906 7.1875 11.5C7.1875 11.3094 7.26323 11.1266 7.39802 10.9918C7.53281 10.857 7.71563 10.7812 7.90625 10.7812H13.3589L11.7102 9.13352C11.5754 8.99865 11.4996 8.81573 11.4996 8.625C11.4996 8.43427 11.5754 8.25135 11.7102 8.11648C11.8451 7.98162 12.028 7.90585 12.2188 7.90585C12.4095 7.90585 12.5924 7.98162 12.7273 8.11648L15.6023 10.9915Z" fill="white"/>
+</svg>
diff --git a/src/components/ui/Buttons/AppLink.tsx b/src/components/ui/Buttons/AppLink.tsx
new file mode 100644
index 0000000..4f8c12b
--- /dev/null
+++ b/src/components/ui/Buttons/AppLink.tsx
@@ -0,0 +1,37 @@
+import { Link } from "@mui/material";
+import Image from "next/image";
+
+interface IAppLink {
+  text: string;
+  link: string;
+}
+
+const AppLink: React.FC<IAppLink> = ({ text, link }) => {
+  return (
+    <Link
+      href={link}
+      sx={{
+        display: "flex",
+        width: "fit-content",
+        textTransform: "uppercase",
+        color: "white",
+        padding: "10px 20px",
+        borderRadius: "75px",
+        backgroundColor: "primary.main",
+        ":hover": {
+          backgroundColor: "primary.dark",
+        },
+        alignSelf: "center",
+        gap: "10px",
+      }}
+    >
+      {text}
+      <Image
+        src={require("public/product_assets/images/white-arrow.svg")}
+        alt=""
+      />
+    </Link>
+  );
+};
+
+export default AppLink;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e535610..9633556 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import { Stack, Container, Fab, Link, List, Paper } from "@mui/material";
+import { Stack, Container, List, Paper } from "@mui/material";
 import { Box } from "@mui/system";
 import { useAtom } from "jotai";
 import type { NextPage } from "next";
@@ -6,6 +6,7 @@ import Image from "next/image";
 import { useEffect } from "react";
 
 import AppBar from "components/ui/AppBar/AppBar";
+import AppLink from "src/components/ui/Buttons/AppLink";
 import { cartAtom } from "src/store/cart";
 
 const Home: NextPage = () => {
@@ -54,12 +55,7 @@ const Home: NextPage = () => {
               </Paper>
             </Box>
           </Stack>
-
-          <Link href="/fruits">
-            <Fab color="secondary" variant="extended" size="large">
-              Je démarre mes courses
-            </Fab>
-          </Link>
+          <AppLink text="Commencer l'expérience" link="/fruits" />
         </Stack>
       </Container>
     </>