Change components from ant design to tailwind css (#78)

src/components/ChangePasswordForm/ChangePasswordForm.component.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Button, Form, Input } from 'antd';
 
 interface ChangePasswordFormProps {
   onSubmit: (props: {
@@ -9,64 +8,82 @@ interface ChangePasswordFormProps {
   }) => void;
 }
 
-const ChangePasswordForm: React.FC<ChangePasswordFormProps> = () => {
+const ChangePasswordForm: React.FC<ChangePasswordFormProps> = ({
+  onSubmit,
+}) => {
   return (
-    <Form
+    <form
       name="change_password"
-      layout="vertical"
-      initialValues={{ remember: true }}
-      wrapperCol={{ span: 14 }}
+      className="max-w-md mx-auto my-8"
       autoComplete="off"
+      onSubmit={(e) => {
+        e.preventDefault();
+        const formData = new FormData(e.target as HTMLFormElement);
+        const formObject: any = {};
+        formData.forEach((value, key) => {
+          formObject[key] = value;
+        });
+        onSubmit(formObject);
+      }}
     >
-      <Form.Item<string>
-        label="Current Password"
-        name="current_password"
-        rules={[
-          { required: true, message: 'Current Password cannot be empty!' },
-        ]}
-      >
-        <Input.Password />
-      </Form.Item>
+      <div className="mb-6">
+        <label
+          htmlFor="current_password"
+          className="block text-gray-700 font-bold mb-2"
+        >
+          Current Password
+        </label>
+        <input
+          type="password"
+          id="current_password"
+          name="current_password"
+          required
+          className="w-full p-2 border border-gray-300 rounded"
+        />
+      </div>
 
-      <Form.Item<string>
-        label="New Password"
-        name="new_password"
-        rules={[
-          { required: true, message: 'New Password cannot be empty!' },
-          { min: 8, message: 'Password must be at least 8 characters long' },
-        ]}
-      >
-        <Input.Password />
-      </Form.Item>
+      <div className="mb-6">
+        <label
+          htmlFor="new_password"
+          className="block text-gray-700 font-bold mb-2"
+        >
+          New Password
+        </label>
+        <input
+          type="password"
+          id="new_password"
+          name="new_password"
+          required
+          minLength={8}
+          className="w-full p-2 border border-gray-300 rounded"
+        />
+      </div>
 
-      <Form.Item<string>
-        label="Confirm New Password"
-        name="confirm_new_password"
-        dependencies={['new_password']}
-        rules={[
-          { required: true, message: 'Confirm New Password cannot be empty!' },
-          ({ getFieldValue }) => ({
-            async validator(_, value: string) {
-              if (value === '' || getFieldValue('new_password') === value) {
-                await Promise.resolve();
-                return;
-              }
-              return await Promise.reject(
-                new Error("The two passwords don't match")
-              );
-            },
-          }),
-        ]}
-      >
-        <Input.Password />
-      </Form.Item>
+      <div className="mb-6">
+        <label
+          htmlFor="confirm_new_password"
+          className="block text-gray-700 font-bold mb-2"
+        >
+          Confirm New Password
+        </label>
+        <input
+          type="password"
+          id="confirm_new_password"
+          name="confirm_new_password"
+          required
+          className="w-full p-2 border border-gray-300 rounded"
+        />
+      </div>
 
-      <Form.Item>
-        <Button type="primary" htmlType="submit">
+      <div>
+        <button
+          type="submit"
+          className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 focus:outline-none focus:shadow-outline-blue active:bg-blue-800"
+        >
           Submit
-        </Button>
-      </Form.Item>
-    </Form>
+        </button>
+      </div>
+    </form>
   );
 };
 

src/components/MentorCard/MentorCard.component.tsx

@@ -1,41 +1,34 @@
 import React from 'react';
-
 import { UserOutlined } from '@ant-design/icons';
-import { Typography, Avatar, Card } from 'antd';
-
-import styles from './MentorCard.module.css';
-import { type Mentor } from '../../types';
-
-const { Title, Text } = Typography;
+import { type Mentor } from '../../types.ts';
 
 interface MentorCardProps {
   mentor: Mentor;
 }
 
 const MentorCard: React.FC<MentorCardProps> = ({ mentor }) => (
-  <Card className={styles.cardContainer}>
+  <div className="border border-gray-200 p-4 rounded-md shadow-md w-52">
     {mentor.profile.image_url !== null ? (
-      <Avatar
+      <img
         src={mentor.profile.image_url}
-        size={100}
-        className={styles.avatarContainer}
+        alt="Mentor Avatar"
+        className="w-24 h-24 rounded-full mx-auto mb-4"
       />
     ) : (
-      <Avatar
-        icon={<UserOutlined />}
-        size={100}
-        className={styles.avatarContainer}
-      />
+      <div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
+        <UserOutlined className="text-gray-400 text-2xl" />
+      </div>
     )}
-    <div className={styles.avatarContainer}>
-      <Title level={5} className={styles.title}>
+    <div className="text-center">
+      <h5 className="text-lg font-bold">
         {mentor.profile.first_name} {mentor.profile.last_name}
-      </Title>
-      <Text>{mentor.application.designation}</Text>
-      <br />
-      <Text type="secondary">{mentor.application.company_or_institution}</Text>
+      </h5>
+      <p className="text-sm">{mentor.application.designation}</p>
+      <p className="text-xs text-gray-500">
+        {mentor.application.company_or_institution}
+      </p>
     </div>
-  </Card>
+  </div>
 );
 
 export default MentorCard;

src/components/MentorList/MentorList.component.tsx

@@ -1,20 +1,17 @@
 import React from 'react';
-
-import { Row, Col } from 'antd';
-
-import { type Mentor } from '../../types';
 import MentorCard from '../MentorCard/MentorCard.component';
+import { type Mentor } from '../../types.ts';
 
 interface ListProps {
   mentors?: Mentor[];
 }
 
 export const MentorList: React.FC<ListProps> = ({ mentors }: ListProps) => (
-  <Row gutter={[16, 16]}>
+  <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
     {mentors?.map((mentor) => (
-      <Col key={mentor.mentor_id} xs={24} sm={12} md={8} lg={6}>
+      <div key={mentor.mentor_id} className="w-full">
         <MentorCard mentor={mentor} />
-      </Col>
+      </div>
     ))}
-  </Row>
+  </div>
 );

src/components/Testimonials/TestimonialCard.tsx

@@ -1,27 +1,20 @@
 import React from 'react';
 
-import { Card, Space, Typography } from 'antd';
-
-import styles from './TestimonialCard.module.css';
-
-const { Text } = Typography;
-
 const TestimonialCard: React.FC = () => (
-  <Card className={styles.testimonialCardContainer}>
+  <div className="border border-gray-200 p-4 rounded-md shadow-md w-52">
     <img
-      className={styles.testimonialCardImage}
+      className="w-full h-40 object-cover rounded-md mb-4"
       src="/testimonial-image.png"
       alt="testimonial-image"
     />
-    <Space direction={'vertical'}>
-      <Text className={styles.testimonialCardTitle}>
-        Adipiscing aliquam scelerisque
-      </Text>
-      <Text className={styles.testimonialCardContent}>
+    <div className="space-y-2">
+      <p className="text-lg font-bold">Adipiscing aliquam scelerisque</p>
+      <p className="text-sm">
         Sit tempor in egestas eget risus fames massa. Morbi vitae ante tortor
         lacinia amet cursus est eget nisi. Est mauris nam a euismod in nibh.
-      </Text>
-    </Space>
-  </Card>
+      </p>
+    </div>
+  </div>
 );
+
 export default TestimonialCard;