feat: disclaimer component

vechain · Jun 14, 2024 · 234ba5d · 234ba5d
1 parent d24fd89
commit 234ba5d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/apps/frontend/src/App.tsx b/apps/frontend/src/App.tsx
@@ -7,7 +7,7 @@ import {
   ChakraProvider,
   Container,
   Flex,
-  Link
+  Link,
 } from "@chakra-ui/react";
 import {
   Dropzone,
@@ -19,6 +19,7 @@ import {
 } from "./components";
 import { lightTheme } from "./theme";
 import { GoogleReCaptchaProvider } from "react-google-recaptcha-v3";
+import { Disclaimer } from "./components/Disclaimer/Disclaimer.tsx";
 
 // RECaptcha V3 site key (https://developers.google.com/recaptcha/docs/v3)
 const VITE_RECAPTCHA_V3_SITE_KEY = import.meta.env
@@ -54,11 +55,8 @@ function App() {
             </Container>
           </Flex>
           <Footer />
-          <Alert status='warning'>
-            <AlertIcon />
-            <AlertTitle>Disclaimer</AlertTitle>
-            <AlertDescription>The use case of this template is inspired by the <Link color='teal.500' href={"https://www.greencart.vet/"}>GreenCart Dapp</Link>. The code has been built from scratch and does not contain any references to the GreenCart codebase.</AlertDescription>
-          </Alert>
+          {/* DISCLAIMER */}
+          <Disclaimer />
           {/* MODALS  */}
           <SubmissionModal />
         </DAppKitProvider>

diff --git a/apps/frontend/src/components/Disclaimer/Disclaimer.tsx b/apps/frontend/src/components/Disclaimer/Disclaimer.tsx
@@ -0,0 +1,27 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  Container,
+  Link,
+} from "@chakra-ui/react";
+
+export const Disclaimer = () => {
+  return (
+    <Alert status="warning">
+      <Container maxW={"container.xl"} display={"flex"} flexDirection={"row"}>
+        <AlertIcon />
+        <AlertTitle fontSize={"sm"}>Disclaimer</AlertTitle>
+        <AlertDescription fontSize={"sm"}>
+          The use case of this template is inspired by the{" "}
+          <Link color="teal.500" href={"https://www.greencart.vet/"}>
+            GreenCart Dapp
+          </Link>
+          . The code has been built from scratch and does not contain any
+          references to the GreenCart codebase.
+        </AlertDescription>
+      </Container>
+    </Alert>
+  );
+};
diff --git a/apps/frontend/src/components/Disclaimer/index.ts b/apps/frontend/src/components/Disclaimer/index.ts
@@ -0,0 +1 @@
+export * from "./Disclaimer";