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