Next, tsx, bootstrap components

Author: matejanajdanov2

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

package.json

@@ -7,14 +7,18 @@
     "start": "next start"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^1.0.0",
-    "@chakra-ui/react": "^1.4.2",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
+    "bootstrap": "^5.0.0-beta3",
     "framer-motion": "^4.0.3",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^15.0.2",
+    "@types/react": "^17.0.5",
+    "typescript": "^4.2.4"
+  }
 }

src/components/Button.tsx

@@ -0,0 +1,21 @@
+import React, { ButtonHTMLAttributes } from 'react';
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  buttonText: string;
+  buttonColor?: 'primary' | 'secondary' | 'light' | 'dark';
+  buttonBackgroundColor: 'primary' | 'secondary' | 'light' | 'dark';
+  buttonWidth?: 'w-25' | 'w-50' | 'w-75' | 'w-100';
+  styles?: string;
+};
+
+export const Button: React.FC<ButtonProps> = ({
+  buttonText,
+  buttonColor,
+  buttonBackgroundColor,
+  buttonWidth,
+  styles,
+  ...props
+}) => {
+  return <button className={`btn btn-${buttonBackgroundColor} ${buttonWidth} ${styles}`}>{buttonText}</button>;
+};
+export default Button;

src/components/CTA.js

@@ -0,0 +1,26 @@
+import React, { InputHTMLAttributes } from 'react';
+
+type InputFieldProps = InputHTMLAttributes<HTMLInputElement> & {
+  labelText: string;
+  formHandler?: (event) => void;
+};
+
+export const InputField: React.FC<InputFieldProps> = ({
+  labelText,
+  formHandler,
+  ...props
+}) => {
+  return (
+    <React.Fragment>
+      <label htmlFor={props.id}>{labelText}</label>
+      <input
+        id={props.id}
+        type={props.type}
+        name={props.name}
+        className='form-control mb-2'
+        onChange={formHandler}
+      />
+    </React.Fragment>
+  );
+};
+export default InputField;

src/components/Container.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+interface WrapperProps {
+    width?: 'w-25' | 'w-50' | 'w-75';
+}
+
+export const Wrapper: React.FC<WrapperProps> = ({ width, children }) => {
+  return <div className={`${width} container`}>{children}</div>;
+};
+export default Wrapper;

src/components/DarkModeSwitch.js

@@ -0,0 +1,7 @@
+import Head from 'next/head';
+import 'bootstrap/dist/css/bootstrap.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component className="container" {...pageProps} />;
+}
+export default MyApp;

src/components/Footer.js

@@ -0,0 +1,3 @@
+const Index = () => <div>Hello world</div>;
+
+export default Index;

src/components/Hero.js

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import Button from '../components/Button';
+import InputField from '../components/InputField';
+import Wrapper from '../components/Wrapper';
+
+interface RegisterState {
+  username: string;
+  password: string;
+}
+
+const Register: React.FC = () => {
+  const [registerData, setRegisterData] = useState<RegisterState>({
+    username: '',
+    password: '',
+  });
+
+  const formHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setRegisterData({
+      ...registerData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  return (
+    <Wrapper width='w-50'>
+      <div className='card mt-5'>
+        <div className='card-body'>
+          <form>
+            <InputField
+              labelText='Username'
+              id='username'
+              type='text'
+              name='username'
+              formHandler={formHandler}
+            />
+            <InputField
+              labelText='Password'
+              id='password'
+              type='password'
+              name='password'
+              formHandler={formHandler}
+            />
+            <Button
+              buttonBackgroundColor='dark'
+              buttonText='Submit'
+              buttonWidth='w-100'
+              styles='mt-4'
+            />
+          </form>
+        </div>
+      </div>
+    </Wrapper>
+  );
+};
+
+export default Register;

src/components/InputField.tsx

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}