frontend: Add files for library components.

Added starter files for input, button etc.
Updated the docs with the changes.

CONVENTIONS.md

@@ -14,6 +14,7 @@
 ## For React Components
 - Use functional components with hooks instead of class based components.
 - Avoid copy pasting code. If you find yourself copying and pasting code, consider refactoring it into a reusable component or function. Use array methods like `map`, `filter`, and `reduce` to avoid duplicating code.
+- Try to use tailwind for css styling as much as possible. If you need to write custom css, use CSS modules. Avoid using global styles, unless they actually need to be global. Take `input.tsx` as reference.
 
 
 ## Commit Message Guidelines
@@ -53,5 +54,6 @@
 - Avoid unnecessary code duplication and strive for code reusability.
 - Write clear and concise documentation for public APIs and important functions. Do not over-document trivial functions.
 - We are using TypeScript in a very lenient and flexible setting. The project can have both JS and TS files, and one of the goals would be to convert all files to TS eventually. Where you are not using types.
+- Try to keep the use of external dependencies to a minimum. This is because the purpose of project is first to learn and then to build. So, we will try to build as much as possible from scratch.
 
 Remember to review and adhere to these conventions to maintain a clean and consistent codebase.

frontend/src/App.tsx

@@ -1,13 +1,14 @@
 import { useState } from 'react';
 import './App.css';
+import Navbar from './Navbar';
 
 function App() {
     const [count, setCount] = useState(0);
     const a = 5;
     console.log(a);
     return (
         <>
-            <h1>UNO!!!</h1>
+            <Navbar></Navbar>
             <p>Lets play a game of UNO! Click the button to draw a card.</p>
             <p>Card: {count}</p>
             <button onClick={() => setCount(count + 1)}>Draw a card</button>

frontend/src/Navbar.tsx

@@ -0,0 +1,9 @@
+function Navbar() {
+    return (
+        <div>
+            UNO!!!
+        </div>
+    )
+}
+
+export default Navbar

frontend/src/library/button.tsx

@@ -0,0 +1,17 @@
+// Design a flexible reusable button component that can be used in different parts of the application.
+// The button component should have the following features:
+// - Customize background color, text color, and border color
+// - Customize the size of the button (small, medium, large)
+// - Customize the shape of the button (rectangle, rounded, circle)
+// - Handles click events
+
+
+function Button() {
+    return (
+        <div>
+
+        </div>
+    )
+}
+
+export default Button

frontend/src/library/input.module.css

@@ -0,0 +1,2 @@
+
+/* rules defined in this file are scoped to the js/ts file importing this.  */

frontend/src/library/input.tsx

@@ -0,0 +1,15 @@
+import styles from './input.module.css';
+
+type InputComponentProps = {
+    placeholder?: string;
+};
+
+function Input({ placeholder }: InputComponentProps) {
+    return (
+        <div>
+            <input style={styles} placeholder={placeholder}></input>
+        </div>
+    );
+}
+
+export default Input;