feat ✨ : add contact card

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chakra-ui/avatar": "^2.3.0",
     "@chakra-ui/button": "^2.1.0",
     "@chakra-ui/card": "^2.2.0",
     "@chakra-ui/form-control": "^2.2.0",

frontend/src/App.tsx

@@ -18,7 +18,7 @@ const AppContent = () => {
 			<div
 				className={
 					!isAuthPage
-						? "ml-[27%] sm:ml-[14%] border border-black min-h-screen p-3 bg-pink-200 rounded-md"
+						? "ml-[27%] sm:ml-[14%] min-h-screen p-3 rounded-md"
 						: "min-h-screen p-3"
 				}
 			>

frontend/src/components/Cards/ContactCard.tsx

@@ -0,0 +1,53 @@
+import {
+	Avatar,
+	Card,
+	CardBody,
+	CardFooter,
+	IconButton,
+} from "@chakra-ui/react";
+import { IoCallOutline } from "react-icons/io5";
+import { TbMessage } from "react-icons/tb";
+import type { Contact } from "../../types";
+
+const ContactCard = ({
+	firstName,
+	lastName,
+	phoneNumber,
+}: Partial<Contact>) => {
+	return (
+		<Card
+			display="flex"
+			flexDirection="row"
+            size="sm"
+			className="sm:max-w-[25rem]"
+		>
+			<CardBody className="flex gap-4 items-center">
+				<Avatar
+					name={firstName}
+					bg="teal.500"
+				/>
+				<div className="text-left">
+					<p className="text-lg">
+						{firstName} {lastName}
+					</p>
+					<p className="text-sm text-neutral-600">{phoneNumber}</p>
+				</div>
+			</CardBody>
+			<CardFooter className="flex gap-4">
+				<IconButton
+					aria-label="Call Sage"
+					colorScheme="teal"
+					variant="outline"
+					icon={<IoCallOutline size={25} />}
+				></IconButton>
+				<IconButton
+					aria-label="Call Sage"
+					colorScheme="teal"
+					icon={<TbMessage size={25} />}
+				></IconButton>
+			</CardFooter>
+		</Card>
+	);
+};
+
+export default ContactCard;

frontend/src/pages/Home.tsx

@@ -1,5 +1,11 @@
+import ContactCard from "../components/Cards/ContactCard";
+
 const Home = () => {
-	return <div className="">Home</div>;
+	return (
+		<div className="">
+			<ContactCard firstName="John" lastName="Doe" phoneNumber="0112039966"/>
+		</div>
+	);
 };
 
 export default Home;

frontend/src/types.ts

@@ -1,6 +1,13 @@
+export interface User {
+	firstName: string;
+	lastName: string;
+	username?: string;
+	email: string;
+}
 export interface Contact {
-    firstName: string,
-    lastName: string,
-    phoneNumber:string,
-    email?:string,
-}
+	owner?: Partial<User>;
+	firstName: string;
+	lastName: string;
+	phoneNumber: string;
+	email?: string;
+}