App.
jsx
// import StaticGroups from './StaticGroups.jsx'
import IDCard from './IDCard.jsx'
// import TeamList from './TeamList.jsx'
function App() {
return (
<>
{/* <StaticGroups /> */}
<IDCard/>
{/* <TeamList /> */}
</>
)
}
export default App
-------------------------------------------------------------------------------
teamlist.jsx
// src/components/TeamList.js
import React, {useState } from "react";
import TeamMemberCard from "./TeamMemberCard"; // Import the card component
import "../public/TeamStyles.css"; // Import the CSS file
const TeamList = () => {
const [sampleTeamData, setSampleTeamData] = useState([
{
firstName: "Prakash",
lastName: "https://atmiyauni.ac.in/public/facultypro/1738232775.158.JPG",
city: "Rajkot",
mobile: "9601026377",
email: "
[email protected]",
id: 3,
},
]);
// useEffect(() => {
// fetch("http://localhost:8000/api/cards")
// .then((response) => response.json())
// .then((data) => {
// // console.log("Data fetched:", data);
// setSampleTeamData(data.data);
// })
// .catch((error) => {
// console.error("Error fetching data:", error);
// });
// }, []);
return (
<div className="team-list-container">
{" "}
<h2 className="team-main-title">ATMIYA UNIVERSITY</h2>{" "}
{/* Use className */}
{sampleTeamData.map((member) => (
<TeamMemberCard key={member.id} member={member} />
))}
</div>
);
};
export default TeamList;
---------------------------------------------------------
teamMember.jsx
import React from "react";
// import "./TeamStyles.css";
const TeamMemberCard = ({ member }) => {
if (!member) {
return null;
}
return (
<div className="team-card">
<img
src={member.lastName}
alt={`Profile of ${member.firstName}`}
className="team-member-image"
/>
<div className="team-text-content">
<h3 className="team-member-name">{member.firstName}</h3>
<h4 className="team-member-title">{member.city}</h4>
<h4 className="team-member-title">{member.mobile}</h4>
<h4 className="team-member-title">{member.email}</h4>
</div>
</div>
);
};
export default TeamMemberCard;
-----------------------------------------------------------------------------------
----------------
teamStyle.css
/* TeamStyles.css */
/* Styles for the main list container */
.team-list-container {
padding: 20px;
max-width: 800px; /* Center the list container itself */
margin: 30px auto; /* Add margin top/bottom and center horizontally */
font-family: Arial, sans-serif; /* Basic font stack for consistency */
}
/* Optional: Style for a title above the list */
.team-main-title {
text-align: center;
color: #002060; /* Dark blue from the original design */
margin-bottom: 40px; /* Increased space below title */
font-size: 2.5em;
font-weight: bold;
text-transform: uppercase;
}
/* Styles for the container of each team member card */
.team-card {
display: flex; /* Aligns image and text side-by-side */
align-items: center; /* Vertically centers items */
margin-bottom: 25px; /* Space below each card */
max-width: 700px; /* Max width for the card */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
overflow: hidden; /* Keeps content within bounds */
background-color: white; /* Ensure background for overlap */
}
/* Styles for the profile image */
.team-member-image {
width: 130px; /* Fixed width */
height: 130px; /* Fixed height */
border-radius: 50%; /* Makes it circular */
object-fit: cover; /* Covers the area, crops if needed */
margin-right: -65px; /* Pulls text block over image */
border: 5px solid white; /* White border around the image */
z-index: 1; /* Image is above the blue background overlap */
background-color: #ccc; /* Placeholder background */
flex-shrink: 0; /* Prevent image from shrinking */
}
/* Styles for the text content container (blue background) */
.team-text-content {
background-color: #002060; /* Dark blue background */
color: white; /* White text */
/* Padding: Top, Right, Bottom, Left. Left padding accounts for image overlap
*/
padding: 20px 20px 20px 85px;
flex-grow: 1; /* Takes remaining space */
min-height: 130px; /* Minimum height matching image */
display: flex;
flex-direction: column;
justify-content: center;
}
/* Styles for the member's name */
.team-member-name {
margin: 0 0 4px 0; /* Margin bottom for spacing */
font-size: 1.1em; /* Font size */
font-weight: bold; /* Bold text */
text-transform: uppercase; /* Uppercase */
}
/* Styles for the member's title */
.team-member-title {
margin: 0 0 10px 0; /* Margin bottom */
font-size: 0.9em; /* Smaller font size */
font-weight: bold;
text-transform: uppercase;
opacity: 0.9; /* Slightly less prominent */
}
/* Styles for the member's description */
.team-member-description {
margin: 0; /* No margin */
font-size: 0.85em; /* Font size */
line-height: 1.5; /* Line spacing */
}
-----------------------------------------------------------------------------------
-----------
idcard.jsx
import React, { useState } from "react";
function IDCard() {
const [profile, setProfile] = useState({});
function handleChange(event) {
setProfile({ ...profile, [event.target.name]: event.target.value });
}
// async function dataSubmit(data) {
// console.log("Data:", data);
// const response = await fetch("http://localhost:8000/api/test", {
// method: "POST",
// body: JSON.stringify(data),
// headers: {
// "Content-Type": "application/json",
// },
// })
// .then((response) => {
// return response.json();
// })
// .then((rdata) => {
// console.log("Success:", rdata);
// })
// .catch((error) => {
// console.error("Error:", error);
// });
// }
return (
<div
style={{
display: "grid",
gridTemplateColumns: "50% 50%",
height: "92vh",
}}
>
<div style={{ backgroundColor: "cream" }}>
<p>Name</p>
<input
type="text"
placeholder="Enter your First Name"
onChange={(event) => {
handleChange(event);
}}
name="firstName"
/>
<input
type="text"
placeholder="Enter your Last Name"
onChange={(event) => {
handleChange(event);
}}
name="lastName"
/>
<input
type="text"
placeholder="Enter your City"
onChange={(event) => {
handleChange(event);
}}
name="city"
/>
<input
type="number"
placeholder="Enter your mobile Name"
onChange={(event) => {
handleChange(event);
}}
name="mobile"
/>
<input
type="email"
placeholder="Enter your email Name"
onChange={(event) => {
handleChange(event);
}}
name="email"
/>
<button
onClick={() => {
dataSubmit(profile);
}}
>
Submit
</button>
</div>
<div style={{ backgroundColor: "lightblue" }}>
<center>
<h1>Name: {`${profile.firstName} ${profile.lastName} `}</h1>
<h3>City :{` ${profile.city} `} </h3>
<h3>mobile :{` ${profile.mobile} `} </h3>
<h3>email :{` ${profile.email}`} </h3>
</center>
</div>
</div>
);
}
export default IDCard;
