39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import './Groups.css';
|
|
|
|
const GroupCard = ({ name, members }: { name: string, members: string }) => (
|
|
<div className="group-card">
|
|
<div className="group-banner-placeholder">Banner</div>
|
|
<div className="group-info">
|
|
<div className="group-name">{name}</div>
|
|
<div className="group-members">{members} members</div>
|
|
<button className="join-btn">Join Group</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const Groups: React.FC = () => {
|
|
return (
|
|
<div className="groups-page">
|
|
<div className="groups-sidebar">
|
|
<h2>Groups</h2>
|
|
<div className="friends-menu-item active">Your feed</div>
|
|
<div className="friends-menu-item">Discover</div>
|
|
<div className="friends-menu-item">Your groups</div>
|
|
<button className="create-group-btn">+ Create new group</button>
|
|
</div>
|
|
<div className="groups-content">
|
|
<h3>Suggested for you</h3>
|
|
<div className="groups-grid">
|
|
<GroupCard name="React Developers" members="150k" />
|
|
<GroupCard name="Cooking Enthusiasts" members="45k" />
|
|
<GroupCard name="Photography Lovers" members="80k" />
|
|
<GroupCard name="Local Yard Sale" members="12k" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Groups;
|