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
GitHub
parent
c755907d99
commit
4a81b988b4
7 changed files with 455 additions and 37 deletions
|
|
@ -24,10 +24,29 @@ import { HeaderButton } from "components/ui";
|
|||
import { CreateUpdatePageModal } from "components/pages/create-update-page-modal";
|
||||
import { PagesList } from "components/pages/pages-list";
|
||||
import { IPage } from "types";
|
||||
import PagesMasonry from "components/pages/pages-masonry";
|
||||
import { Tab } from "@headlessui/react";
|
||||
import { ListBulletIcon, RectangleGroupIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
|
||||
import { PagesGrid } from "components/pages/pages-grid";
|
||||
|
||||
const TabPill: React.FC<any> = (props) => (
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`rounded-full border px-5 py-1.5 text-sm outline-none ${
|
||||
selected
|
||||
? "border-theme bg-theme text-white"
|
||||
: "border-gray-300 bg-white hover:bg-hover-gray"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{props.children}
|
||||
</Tab>
|
||||
);
|
||||
|
||||
const ProjectPages: NextPage = () => {
|
||||
const [isCreateUpdatePageModalOpen, setIsCreateUpdatePageModalOpen] = useState(false);
|
||||
const [selectedPage, setSelectedPage] = useState<IPage>();
|
||||
const [viewType, setViewType] = useState("list");
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
|
@ -82,17 +101,96 @@ const ProjectPages: NextPage = () => {
|
|||
handleClose={() => setIsCreateUpdatePageModalOpen(false)}
|
||||
data={selectedPage}
|
||||
/>
|
||||
<div className="space-y-2 pb-8">
|
||||
<h3 className="text-3xl font-semibold text-black">Pages</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
Note down all the important and minor details in the way you want to.
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
<div className="overflow-hidden rounded-lg border border-gray-200 bg-white px-4 pt-3 pb-4 shadow-sm ">
|
||||
<label htmlFor="name" className="sr-only">
|
||||
Title
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
className="block w-full border-0 pt-2.5 text-lg font-medium placeholder-gray-500 outline-none focus:ring-0"
|
||||
placeholder="Title"
|
||||
/>
|
||||
<label htmlFor="description" className="sr-only">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
rows={2}
|
||||
name="description"
|
||||
id="description"
|
||||
className="block w-full resize-none border-0 pb-8 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
placeholder="Write something..."
|
||||
defaultValue={""}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* <div className="space-y-2 pb-8">
|
||||
<h3 className="text-3xl font-semibold text-black">Pages</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
Note down all the important and minor details in the way you want to.
|
||||
</p>
|
||||
</div> */}
|
||||
<div>
|
||||
<Tab.Group>
|
||||
<Tab.List as="div" className="flex items-center justify-between ">
|
||||
<div className="flex gap-4 text-base font-medium">
|
||||
<TabPill>Recent</TabPill>
|
||||
<TabPill>All</TabPill>
|
||||
<TabPill>Favorites</TabPill>
|
||||
<TabPill>Created by me</TabPill>
|
||||
<TabPill>Created by others</TabPill>
|
||||
</div>
|
||||
<div className="flex items-center gap-x-1">
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
|
||||
viewType === "list" ? "bg-gray-200" : ""
|
||||
}`}
|
||||
onClick={() => setViewType("list")}
|
||||
>
|
||||
<ListBulletIcon className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
|
||||
viewType === "grid" ? "bg-gray-200" : ""
|
||||
}`}
|
||||
onClick={() => setViewType("grid")}
|
||||
>
|
||||
<Squares2X2Icon className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
|
||||
viewType === "masonry" ? "bg-gray-200" : ""
|
||||
}`}
|
||||
onClick={() => setViewType("masonry")}
|
||||
>
|
||||
<RectangleGroupIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</Tab.List>
|
||||
</Tab.Group>
|
||||
</div>
|
||||
|
||||
{viewType === "list" && (
|
||||
<PagesList
|
||||
setSelectedPage={setSelectedPage}
|
||||
setCreateUpdatePageModal={setIsCreateUpdatePageModalOpen}
|
||||
pages={pages}
|
||||
/>
|
||||
)}
|
||||
{viewType === "grid" && (
|
||||
<PagesGrid
|
||||
setSelectedPage={setSelectedPage}
|
||||
setCreateUpdatePageModal={setIsCreateUpdatePageModalOpen}
|
||||
pages={pages}
|
||||
/>
|
||||
)}
|
||||
{viewType === "masonry" && <PagesMasonry />}
|
||||
</div>
|
||||
<PagesList
|
||||
setSelectedPage={setSelectedPage}
|
||||
setCreateUpdatePageModal={setIsCreateUpdatePageModalOpen}
|
||||
pages={pages}
|
||||
/>
|
||||
</AppLayout>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue