Merge pull request #7 from urbint/mr/add-doc-link

Creating documentation component link

src/components/DocumentationLink/DocumentationLink.module.css

@@ -0,0 +1,3 @@
+.description {
+  font-size: 16px;
+}

src/components/DocumentationLink/DocumentationLink.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from "@testing-library/react";
+
+import { DocumentationLink } from "./DocumentationLink";
+
+describe(DocumentationLink.name, () => {
+  it("renders correctly text and link", () => {
+    render(<DocumentationLink />);
+    const docLink = screen.getByRole("link");
+
+    expect(screen.getByText("Documentation")).toBeInTheDocument();
+    expect(docLink).toHaveAttribute(
+      "href",
+      "https://github.com/urbint/fe-app-project#fe-template-app"
+    );
+  });
+});

src/components/DocumentationLink/DocumentationLink.tsx

@@ -0,0 +1,17 @@
+import styles from "./DocumentationLink.module.css";
+
+const DocumentationLink = () => {
+  return (
+    <>
+      <p className={styles.description}>
+        For more information about folder structure, best practices and tools
+        used check this link for more information:{" "}
+      </p>
+      <a href="https://github.com/urbint/fe-app-project#fe-template-app">
+        Documentation
+      </a>
+    </>
+  );
+};
+
+export { DocumentationLink };

src/components/DocumentationLink/index.ts

@@ -0,0 +1 @@
+export * from "./DocumentationLink";

src/components/index.ts

@@ -1 +1,2 @@
 export * from "./WelcomeMessage";
+export * from "./DocumentationLink";

src/pages/index.tsx

@@ -2,6 +2,7 @@ import Head from "next/head";
 import { Inter } from "@next/font/google";
 import styles from "@/styles/Home.module.css";
 import { WelcomeMessage } from "@/components";
+import { DocumentationLink } from "@/components/DocumentationLink";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -16,6 +17,7 @@ export default function Home() {
       </Head>
       <main className={`${styles.main} ${inter.className}`}>
         <WelcomeMessage />
+        <DocumentationLink />
       </main>
     </>
   );