Skip to content

Commit

Permalink
Merge pull request #1630 from bijomathewjose/old-dev
Browse files Browse the repository at this point in the history
fix : campus page -campus card
  • Loading branch information
Jenin82 authored Aug 28, 2024
2 parents 8d335b8 + b08ab97 commit 6fc515d
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 20 deletions.
21 changes: 2 additions & 19 deletions src/Pages/CampusChapters/CampusChapters.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Typography from "@mui/material/Typography";
import { Button, CardActionArea, CardActions } from "@mui/material";
import Levels from "./Levels/Levels";
import axios from "axios";
import { CampusCard } from "./campus-card/CampusCard";

const CampusChapters = () => {
const [selectedZone, setSelectedZone] = useState("all");
Expand Down Expand Up @@ -197,25 +198,7 @@ const CampusChapters = () => {
(selectedZone === "all" &&
campus.district === selectedDistrict)
) {
return (
<div className={styles.college}>
<div className={styles.college_name}>{campus.name}</div>
<div className={styles.college_district}>
{campus.district}
</div>
<div className={styles.college_zone}>
Zone: {campus.zone}
</div>
<div className={styles.college_lead}>
Campus Lead: {campus.lead}
</div>
{campus.email && (
<div className={styles.college_email}>
Email Address: {campus.email}
</div>
)}
</div>
);
return <CampusCard data={campus} />;
}
//return the campuses that match the selected zone and district
// else if (
Expand Down
4 changes: 3 additions & 1 deletion src/Pages/CampusChapters/CampusChapters.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -562,6 +562,8 @@ p {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 1.5rem;
}

.college {
Expand Down Expand Up @@ -642,4 +644,4 @@ p {
font-family: "Noto Sans", sans-serif;
font-size: 4.55rem;
font-weight: 600;
}
}
61 changes: 61 additions & 0 deletions src/Pages/CampusChapters/campus-card/CampusCard.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import React from 'react'
export const Content = ({ title, children, className }) => {
return (
<div className={`flex flex-col gap-1 justify-center items-start ${className}`}>
<h3 className="text-xs font-bold ">{title}</h3>
<p className="text-sm font-light">{children}</p>
</div>
)
}
export const CampusName = ({ children }) => {
return (
<div className="relative mb-4 group">
<p className='truncate text-sm md:text-lg font-bold leading-tight text-muorange text-ellipsis'>{children}</p>
<p className='hidden bg-white p-5 shadow-sm rounded-xl group-hover:block absolute top-0 left-0 right-0 w-full text-sm md:text-lg font-bold leading-tight text-muorange'>
{children}
</p>
</div>
)
}
export const CampusCard = ({ data }) => {

return (
<div className="w-full sm:max-w-[47.2%] lg:max-w-[31.66796%] p-5 rounded-xl shadow-[0_0_5px_2px_rgba(0,0,0,0.05)]">
<CampusName>{data.name}</CampusName>
<div className="flex flex-col gap-4 ">
<div className="grid grid-cols-4">
<Content title={'Zone'} >{data.zone}</Content>
<Content title={'District'} >{data.district}</Content>
</div>
<Content title={'Campus Lead'} >{data.lead}</Content>
<Content title={'Email Address'} >
<a href={`mailto:${data.email}`} className='flex gap-[1px] font-thin justify-center items-center'>
<MailSvg />
{data.email}
</a>
</Content>
</div>
</div>
)
}
export const MailSvg = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg"
width="24" height="24"
viewBox="0 0 24 24" fill="none"
stroke="currentColor" strokeWidth="2"
strokeLinecap="round" strokeLinejoin="round"
class="lucide lucide-mail h-4 w-4 text-muted-foreground"
data-id="18"
>
<rect width="20" height="16" x="2" y="4" rx="2" />
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
</svg>
)
}

export const PopUp = () => {
return (
<div>PopUp</div>
)
}

0 comments on commit 6fc515d

Please sign in to comment.