feat: implemented new pages design with bare minimum functionality (#503)

* chore: add page types and page api service

* chore: add create, list, update and delete on pages

* chore: add create, delete and patch page blocks

* feat: add and remove pages to favorite

* fix: made neccessary changes

- used tailwind for hover events
- add error toast alert
- used partial for patch request

* fix: replace absolute positiong with a flex box

* fix: design list page view to match with ui

* feat: add top large textarea for page title and description

* refactor: add page label with types

* feat: add pages grid layout

* feat: add tabs and masonry layout

* fix: build errors

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
This commit is contained in:
Saheb Giri 2023-03-23 16:12:14 +05:30 committed by GitHub
parent c755907d99
commit 4a81b988b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 455 additions and 37 deletions

View file

@ -7,6 +7,7 @@ import { mutate } from "swr";
import pagesService from "services/pages.service";
// ui
import { CustomMenu } from "components/ui";
import Label from "./page-label";
// icons
import { PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
// helpers
@ -24,20 +25,6 @@ type TSingleStatProps = {
handleDeletePage: () => void;
};
const Label: React.FC<any> = (props) => {
let color = "bg-green-100 text-green-800";
if (props.variant === "red") {
color = "bg-red-100 text-red-800";
} else if (props.variant === "blue") {
color = "bg-blue-100 text-blue-800";
}
return (
<p className={`inline-flex rounded-full px-2 text-xs font-semibold leading-5 ${color}`}>
{props.children}
</p>
);
};
export const SinglePageListItem: React.FC<TSingleStatProps> = (props) => {
const { page, handleEditPage, handleDeletePage } = props;
@ -111,7 +98,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = (props) => {
return (
<div>
<li>
<div className="relative px-4 py-4 hover:bg-gray-50 sm:px-6">
<div className="relative rounded px-4 py-4 hover:bg-gray-200 sm:px-6">
<div className="flex items-center justify-between">
<div className="flex gap-2">
<Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>