add contribute button

opentofu · Sep 19, 2023 · c9fad01 · c9fad01
1 parent dc8eb78
commit c9fad01
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -6,7 +6,7 @@ type ButtonProps = Props & {
   variant: "primary" | "secondary";
 };
 
-export default function Button({ children, variant, ...rest }: ButtonProps) {
+export default function Button({ children, variant, className, ...rest }: ButtonProps) {
   const Tag = "href" in rest ? Link : "button";
   return (
     <Tag
@@ -16,7 +16,8 @@ export default function Button({ children, variant, ...rest }: ButtonProps) {
         variant === "primary" &&
           "bg-brand-500 text-gray-900 hover:bg-brand-600 border-brand-500 hover:border-brand-600-hover hover:text-gray-900",
         variant === "secondary" &&
-          "border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-50 bg-transparent hover:border-gray-900 dark:hover:border-gray-50 hover:text-gray-900 dark:hover:text-gray-50 aria-selected:border-gray-900 dark:aria-selected:border-gray-50"
+          "border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-50 bg-transparent hover:border-gray-900 dark:hover:border-gray-50 hover:text-gray-900 dark:hover:text-gray-50 aria-selected:border-gray-900 dark:aria-selected:border-gray-50",
+          className
       )}
     >
       {children}

diff --git a/src/components/HowToContribute/index.tsx b/src/components/HowToContribute/index.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import Link, { Props } from "@docusaurus/Link";
+import Link from "@docusaurus/Link";
+import Button from "../Button";
 
 // TODO enter final links once ready
 export default function HowToContribute() {
@@ -9,7 +10,7 @@ export default function HowToContribute() {
         <h2 className="text-center text-3xl md:text-5xl mb-3 md:mb-6 font-bold">
           How to use and contribute to OpenTofu?
         </h2>
-        <p className="text-gray-600 dark:text-gray-500 text-center text-base md:text-xl mb-6 md:mb-12 md:leading-relaxed">
+        <p className="text-gray-600 dark:text-gray-500 text-center text-base md:text-xl mb-3 md:mb-6 md:leading-relaxed">
           The best way to show practical support for the OpenTofu initiative is
           to contribute. This{" "}
           <Link
@@ -22,6 +23,9 @@ export default function HowToContribute() {
           submit issues, how to get involved in the discussion, how to work on
           the code, and how to contribute code changes.
         </p>
+        <Button className="mx-auto max-w-fit" variant="primary" href="https://github.com/opentffoundation/opentf/blob/main/CONTRIBUTING.md">
+          Contribute
+        </Button>
       </div>
     </section>
   );