Button and LinkButton components created

Author: enowdivine

src/components/Banner/Banner.tsx

@@ -5,7 +5,7 @@ export default function Banner() {
     <div>
       <div className="bg-white">
         <div
-          className="p-4"
+          className="p-4 text-danger"
           style={{
             background:
               'repeating-linear-gradient(-55deg, #222, rgb(34, 34, 34) 10px, rgb(234, 179, 8) 10px, rgb(234, 179, 8) 20px)',

src/components/Button/Button.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  name: string;
+}
+
+const Button: React.FC<ButtonProps> = ({ children, name, ...props }) => {
+  return (
+    <>
+      <button
+        type="button"
+        name={name}
+        {...props}
+        className="p-4 px-8 text-white font-bold bg-red-600 rounded"
+        style={{
+          display: 'block',
+          width: '200px',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          textAlign: 'center',
+        }}
+      >
+        {children}
+      </button>
+    </>
+  );
+};
+
+export default Button;

src/components/LinkButton/LinkButton.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface LinkProps extends React.HTMLProps<HTMLAnchorElement> {
+  children: React.ReactNode;
+  to: string;
+}
+
+const LinkButton: React.FC<LinkProps> = ({ to, children, ...props }) => {
+  return (
+    <>
+      <a
+        href={to}
+        {...props}
+        className="p-2"
+        style={{
+          width: '100px',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          textAlign: 'center',
+        }}
+      >
+        {children}
+      </a>
+    </>
+  );
+};
+
+export default LinkButton;

src/pages/about/index.page.tsx

@@ -1,5 +1,7 @@
 import Head from 'next/head';
 import React from 'react';
+import Button from '../../components/Button/Button';
+import LinkButton from '../../components/LinkButton/LinkButton';
 
 export default function AboutPage() {
   return (
@@ -9,6 +11,8 @@ export default function AboutPage() {
       </Head>
       <main className="flex justify-center items-center min-h-screen">
         <h1 className="text-white">About page will be here</h1>
+        <Button>Join Community</Button>
+        <LinkButton to="https://test.com">test</LinkButton>
       </main>
     </>
   );