Initial commit. Added some UI components

client/src/components/UI/Badge.tsx

@@ -0,0 +1,14 @@
+import { ReactJs } from '@icons-pack/react-simple-icons';
+
+interface Props {}
+
+export const Badge = (props: Props): JSX.Element => {
+  const Icon = require('@icons-pack/react-simple-icons/lib/components/Youtube');
+
+  return (
+    <span className='badge bg-primary'>
+      <ReactJs color='#61dafb' size={24} />
+      New
+    </span>
+  );
+};

client/src/components/UI/Button.tsx

@@ -0,0 +1,19 @@
+import { Color } from '../../typescript/types';
+
+interface Props {
+  text: string;
+  color: Color;
+  outline?: boolean;
+}
+
+export const Button = (props: Props): JSX.Element => {
+  const { text, color, outline = false } = props;
+
+  const classes = ['btn', outline ? `btn-outline-${color}` : `btn-${color}`];
+
+  return (
+    <button type='button' className={classes.join(' ')}>
+      {text}
+    </button>
+  );
+};

client/src/components/UI/Card.tsx

@@ -0,0 +1,17 @@
+interface Props {
+  title?: string;
+  children?: JSX.Element | JSX.Element[];
+}
+
+export const Card = (props: Props): JSX.Element => {
+  const { title, children } = props;
+
+  return (
+    <div className='card'>
+      <div className='card-body'>
+        <h5 className='card-title'>{title}</h5>
+        {children}
+      </div>
+    </div>
+  );
+};

client/src/components/UI/Layout.tsx

@@ -0,0 +1,11 @@
+interface Props {
+  children: JSX.Element | JSX.Element[];
+}
+
+export const Layout = (props: Props): JSX.Element => {
+  return (
+    <div className='container'>
+      <div className='row pt-4'>{props.children}</div>
+    </div>
+  );
+};

client/src/components/UI/index.ts

@@ -0,0 +1,3 @@
+export * from './Layout';
+export * from './Badge';
+export * from './Card';

client/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

client/src/typescript/types/Colors.ts

@@ -0,0 +1,9 @@
+export type Color =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | 'light'
+  | 'dark';

client/src/typescript/types/index.ts

@@ -0,0 +1 @@
+export * from './Colors';