cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 style: re-styling project list page

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-02-28 08:31:48 +07:00
parent 1fbaf6fdf0
commit 234803e313
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
2 changed files with 21 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/pages/OrgSlug.tsx
View File

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import { Outlet } from 'react-router-dom'; import { Outlet } from 'react-router-dom';
import Sidebar from '../components/Sidebar'; import { OctokitProvider } from 'context/OctokitContext';
import { OctokitProvider } from '../context/OctokitContext'; import { Sidebar } from 'components/shared/Sidebar';
const OrgSlug = () => { const OrgSlug = () => {
return ( return (

40
packages/frontend/src/pages/org-slug/index.tsx
View File

@ -3,11 +3,11 @@ import { Link, useParams } from 'react-router-dom';
import { Project } from 'gql-client'; import { Project } from 'gql-client';
import { Button } from 'components/shared/Button'; import { Button } from 'components/shared/Button';
import { Typography, Chip } from '@material-tailwind/react';
import { useGQLClient } from '../../context/GQLClientContext';
import { PlusIcon } from 'components/shared/CustomIcon'; import { PlusIcon } from 'components/shared/CustomIcon';
import { ProjectCard } from 'components/projects/ProjectCard'; import { ProjectCard } from 'components/projects/ProjectCard';
import { Heading } from 'components/shared/Heading';
import { Badge } from 'components/shared/Badge';
import { useGQLClient } from 'context/GQLClientContext';
const Projects = () => { const Projects = () => {
const client = useGQLClient(); const client = useGQLClient();
@ -26,33 +26,31 @@ const Projects = () => {
}, [orgSlug]); }, [orgSlug]);
return ( return (
<div> <section className="px-6 py-6 flex flex-col gap-6">
<div className="flex p-5"> {/* Header */}
<div className="flex items-center">
<div className="grow"> <div className="grow">
<div className="flex gap-2 items-center"> <div className="flex gap-4 items-center">
<Typography variant="h4" placeholder={''}> <Heading as="h2" className="font-normal text-[24px]">
Projects Projects
</Typography> </Heading>
<Chip <Badge className="bg-base-bg-alternate text-elements-mid-em h-7 w-7">
className="bg-gray-300 rounded-full static" {projects.length}
value={projects.length} </Badge>
size="sm"
/>
</div> </div>
</div> </div>
<div> <Link to="projects/create">
<Link to="projects/create"> <Button leftIcon={<PlusIcon />}>Create project</Button>
<Button leftIcon={<PlusIcon />}>Create project</Button> </Link>
</Link>
</div>
</div> </div>
<div className="grid grid-cols-3 gap-5 p-5"> {/* List of projects */}
{projects.length !== 0 && <div className="grid grid-cols-3 gap-4">
{projects.length > 0 &&
projects.map((project, key) => { projects.map((project, key) => {
return <ProjectCard project={project} key={key} />; return <ProjectCard project={project} key={key} />;
})} })}
</div> </div>
</div> </section>
); );
}; };