8 files changed, 175 insertions, 0 deletions
diff --git a/admin/src/components/Accordion/Accordion.jsx b/admin/src/components/Accordion/Accordion.jsx
new file mode 100644
index 0000000..fefd39b
--- /dev/null
+++ b/admin/src/components/Accordion/Accordion.jsx
@@ -0,0 +1,35 @@
+import React, {useState} from 'react';
+
+import styles from './Accordion.module.css';
+
+const Accordion = ({name, user}) => {
+  const [isActive, setIsActive] = useState(false);
+
+  return (
+    <div className={styles.accordion}>
+      <div
+        className={styles.accordion__title}
+        onClick={() => setIsActive(!isActive)}
+      >
+        <h2>{name}</h2>
+        <div>&#10095;</div>
+      </div>
+      {isActive && (
+        <div className={styles.accordion__content}>
+          <div>Indian Resident : {user.indianResident}</div>
+          <div>Name : {user.name}</div>
+          <div>Gender : {user.gender}</div>
+          <div>Date of Birth : {user.dob}</div>
+          <div>Mobile Number : {user.mobile}</div>
+          <div>Email : {user.email}</div>
+          <div>Address : {user.address}</div>
+          <div>Photograph : {user.photo}</div>
+          <div>Documents : {user.documents.doc1}</div>
+          <div>Biometrics : {user.biometrics.bio1}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Accordion;
diff --git a/admin/src/components/Accordion/Accordion.module.css b/admin/src/components/Accordion/Accordion.module.css
new file mode 100644
index 0000000..86a1c7b
--- /dev/null
+++ b/admin/src/components/Accordion/Accordion.module.css
@@ -0,0 +1,29 @@
+.accordion {
+  width: 600px;
+  margin: 2rem auto;
+}
+
+.accordion__title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  cursor: pointer;
+  background-color: #2c3e50;
+  color: #ecf0f1;
+  border-radius: 10px;
+  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
+}
+
+.accordion__title:hover {
+  background-color: #17212b;
+}
+
+.accordion__title,
+.accordion__content {
+  padding: 1rem;
+}
+
+.accordion__content {
+  background-color: #ecf0f1;
+  border-radius: 10px;
+}
diff --git a/admin/src/components/Button/Button.jsx b/admin/src/components/Button/Button.jsx
new file mode 100644
index 0000000..ed8bc20
--- /dev/null
+++ b/admin/src/components/Button/Button.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import styles from './Button.module.css';
+
+const Button = ({title, onClick, color}) => {
+  return (
+    <>
+      <button
+        className={
+          color === 'green' ? styles.button__green : styles.button__red
+        }
+        onClick={onClick}
+      >
+        {title}
+      </button>
+    </>
+  );
+};
+
+export default Button;
diff --git a/admin/src/components/Button/Button.module.css b/admin/src/components/Button/Button.module.css
new file mode 100644
index 0000000..3de7c54
--- /dev/null
+++ b/admin/src/components/Button/Button.module.css
@@ -0,0 +1,19 @@
+.button__green {
+  font-size: 1rem;
+  margin: 8px;
+  padding: 20px 30px;
+  border: none;
+  border-radius: 10px;
+  background-color: rgb(35, 151, 35);
+  color: #fff;
+}
+
+.button__red {
+  font-size: 1rem;
+  margin: 8px;
+  padding: 20px 30px;
+  border: none;
+  border-radius: 10px;
+  background-color: #ff3333;
+  color: #fff;
+}
diff --git a/admin/src/components/Card/Card.jsx b/admin/src/components/Card/Card.jsx
new file mode 100644
index 0000000..9460955
--- /dev/null
+++ b/admin/src/components/Card/Card.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './Card.module.css'
+
+const Card = ({ title, image, onClick }) => {
+  return (
+    <div onClick={ onClick } className={styles.card}>
+      <img className={styles.card__image} src={image} alt="" />
+      <h2 className={styles.card__title}>{title}</h2>
+    </div>
+  )
+}
+
+export default Card
diff --git a/admin/src/components/Card/Card.module.css b/admin/src/components/Card/Card.module.css
new file mode 100644
index 0000000..e351fd5
--- /dev/null
+++ b/admin/src/components/Card/Card.module.css
@@ -0,0 +1,26 @@
+@import '../../styles/GlobalVariables.css';
+
+.card {
+  height: 300px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 3px solid var(--color-black);
+  border-radius: 10px;
+  margin: 30px;
+  transition: 0.2s all;
+  cursor: pointer;
+  color: var(--color-black);
+  text-decoration-line: none;
+}
+
+.card:active {
+  transform: scale(0.98);
+  box-shadow: 3px 2px 22px 1px var(--color-shadow);
+}
+
+.card__title {
+  margin: 15px 0px;
+}
diff --git a/admin/src/components/Header/Header.jsx b/admin/src/components/Header/Header.jsx
new file mode 100644
index 0000000..d90aafe
--- /dev/null
+++ b/admin/src/components/Header/Header.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './Header.module.css'
+
+const Header = ({ subheading }) => {
+  return (
+    <header className={styles.header}>
+      <h1 className={styles.header__heading}>AADHAAR</h1>
+      <h3 className={styles.header__subheading}>{subheading}</h3>
+    </header>
+  )
+}
+
+export default Header
diff --git a/admin/src/components/Header/Header.module.css b/admin/src/components/Header/Header.module.css
new file mode 100644
index 0000000..8e6084f
--- /dev/null
+++ b/admin/src/components/Header/Header.module.css
@@ -0,0 +1,20 @@
+@import '../../styles/GlobalVariables.css';
+
+.header {
+  font-family: 'Fredoka One', cursive;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+  padding: 20px;
+}
+
+.header__heading {
+  font-size: var(--font-large);
+  font-weight: 400;
+}
+
+.header__subheading {
+  font-size: var(--font-medium);
+  font-weight: 400;
+}