thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: pages UI (#769)

Browse Source 
* style: pages ui

* chore: added toast alert and tooltip

* fix: fixed issues in pages block

* fix: ai buttons inside pages block
This commit is contained in:
Kunal Vishwakarma 2023-04-11 18:18:49 +05:30 committed by GitHub
parent f1f716e8f6
commit e4e66b3ae4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 286 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/app/components/cycles/modal.tsx
View File

@ -23,7 +23,6 @@ import {
CYCLE_DRAFT_LIST,
CYCLE_INCOMPLETE_LIST,
} from "constants/fetch-keys";
import { IncomingMessage } from "http";
type CycleModalProps = {
isOpen: boolean;

146
apps/app/components/pages/create-update-block-inline.tsx
View File

@ -1,9 +1,17 @@
import React, { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/router";
import dynamic from "next/dynamic";
import { mutate } from "swr";
import useSWR, { mutate } from "swr";
import { SparklesIcon } from "@heroicons/react/24/outline";
import { LayerDiagonalIcon } from "components/icons";
import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
import {
BoltIcon,
SparklesIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
@ -12,22 +20,24 @@ import pagesService from "services/pages.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Input, Loader, PrimaryButton, SecondaryButton } from "components/ui";
import { Loader, PrimaryButton, SecondaryButton, CustomMenu, TextArea } from "components/ui";
// types
import { IPageBlock } from "types";
// fetch-keys
import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
import { useCallback, useEffect } from "react";
import issuesService from "services/issues.service";
import aiService from "services/ai.service";
type Props = {
handleClose: () => void;
data?: IPageBlock;
setIsSyncing?: React.Dispatch<React.SetStateAction<boolean>>;
focus?: keyof IPageBlock;
handelAutoGenerateDescription?: () => Promise<void>;
iAmFeelingLucky?: boolean;
setGptAssistantModal: () => void;
handleBlockSync?: () => void;
handleCopyText?: () => void;
pushBlockIntoIssues?: () => void;
deletePageBlock?: () => void;
};
const defaultValues = {
@ -49,10 +59,15 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
data,
setIsSyncing,
focus,
handelAutoGenerateDescription,
setGptAssistantModal,
iAmFeelingLucky,
handleBlockSync,
handleCopyText,
pushBlockIntoIssues,
deletePageBlock,
}) => {
const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
const router = useRouter();
const { workspaceSlug, projectId, pageId } = router.query;
@ -141,6 +156,46 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
.finally(() => onClose());
};
const handleAutoGenerateDescription = async () => {
if (!workspaceSlug || !projectId) return;
setIAmFeelingLucky(true);
aiService
.createGptTask(workspaceSlug as string, projectId as string, {
prompt: watch("name"),
task: "Generate a proper description for this issue in context of a project management software.",
})
.then((res) => {
if (res.response === "")
setToastAlert({
type: "error",
title: "Error!",
message:
"Block title isn't informative enough to generate the description. Please try with a different title.",
});
else {
setValue("description", {});
setValue("description_html", `${watch("description_html")}<p>${res.response}</p>`);
}
})
.catch((err) => {
if (err.status === 429)
setToastAlert({
type: "error",
title: "Error!",
message:
"You have reached the maximum number of requests of 50 requests per month per user.",
});
else
setToastAlert({
type: "error",
title: "Error!",
message: "Some error occurred. Please try again.",
});
}).finally(()=>setIAmFeelingLucky(false));
};
useEffect(() => {
if (focus) setFocus(focus);
@ -167,19 +222,56 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
}, [handleClose]);
return (
<div className="border rounded-[10px] p-2 ml-6">
<form onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}>
<Input
<div>
<form
className="border divide-y rounded-md shadow-md"
onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
>
<div className="px-4 pt-4">
<div className="flex justify-between">
<TextArea
id="name"
name="name"
placeholder="Title"
register={register}
className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-base ring-0 -ml-2 focus:ring-gray-200"
className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-xl font-semibold ring-0 focus:ring-gray-200"
role="textbox"
autoComplete="off"
maxLength={255}
/>
<div className="page-block-section font relative -mx-3 -mt-3">
<CustomMenu label={<BoltIcon className="h-4.5 w-3.5" />} noBorder noChevron>
{data?.issue ? (
<>
<CustomMenu.MenuItem onClick={handleBlockSync}>
<span className="flex items-center gap-1">
<ArrowPathIcon className="h-4 w-4" />
<span>Turn sync {data?.sync ? "off" : "on"}</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center gap-1">
<LinkIcon className="h-4 w-4" />
Copy issue link
</span>
</CustomMenu.MenuItem>
</>
) : (
<CustomMenu.MenuItem onClick={pushBlockIntoIssues}>
<span className="flex items-center gap-1">
<LayerDiagonalIcon className="h-4 w-4" />
Push into issues
</span>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={deletePageBlock}>
<span className="flex items-center gap-1">
<TrashIcon className="h-4 w-4" />
Delete block
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
<div className="page-block-section text-[#495057] relative">
<Controller
name="description"
control={control}
@ -192,24 +284,20 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
}
onJSONChange={(jsonValue) => setValue("description", jsonValue)}
onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
placeholder="Description"
aria-hidden
placeholder="Write something..."
customClassName="text-sm"
noBorder
borderOnFocus={false}
/>
)}
/>
</div>
<div className="flex justify-end items-center gap-2">
{ data &&
<>
{console.log(handelAutoGenerateDescription, setGptAssistantModal, iAmFeelingLucky)}
<div className="flex m-2 mt-6 ml-2">
<button
type="button"
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100 ${iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs border hover:bg-gray-100 ${
iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
}`}
onClick={handelAutoGenerateDescription}
onClick={handleAutoGenerateDescription}
disabled={iAmFeelingLucky}
>
{iAmFeelingLucky ? (
@ -220,19 +308,21 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
</>
)}
</button>
<button
{data && <button
type="button"
className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100"
className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs border ml-4 hover:bg-gray-100"
onClick={() => {
handleClose();
onClose();
setGptAssistantModal();
}}
>
<SparklesIcon className="h-4 w-4" />
AI
</button>
</>
}
</button>}
</div>
</div>
</div>
<div className="flex p-4 justify-end items-center gap-2">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
{data

11
apps/app/components/pages/pages-list/recent-pages-list.tsx
View File

@ -37,16 +37,21 @@ export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
<>
{pages ? (
Object.keys(pages).length > 0 && !isEmpty ? (
<div className="mt-4 space-y-4">
<div className="mt-4 space-y-4 flex flex-col gap-5">
{Object.keys(pages).map((key) => {
if (pages[key].length === 0) return null;
return (
<React.Fragment key={key}>
<h2 className="text-xl font-medium capitalize">
<div>
<h2 className="text-xl font-semibold capitalize mb-4">
{replaceUnderscoreIfSnakeCase(key)}
</h2>
<PagesView pages={pages[key as keyof RecentPagesResponse]} viewType={viewType} />
<PagesView
pages={pages[key as keyof RecentPagesResponse]}
viewType={viewType}
/>
</div>
</React.Fragment>
);
})}

2
apps/app/components/pages/pages-view.tsx
View File

@ -207,7 +207,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
))}
</ul>
) : viewType === "detailed" ? (
<div className="rounded-[10px] border border-gray-200 bg-white">
<div className="rounded-[10px] border divide-y border-gray-200 bg-white">
{pages.map((page) => (
<SinglePageDetailedItem
key={page.id}

62
apps/app/components/pages/single-page-block.tsx
View File

@ -23,13 +23,14 @@ import { CreateUpdateBlockInline } from "components/pages";
import { CustomMenu, Loader } from "components/ui";
// icons
import { LayerDiagonalIcon } from "components/icons";
import { ArrowPathIcon } from "@heroicons/react/20/solid";
import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
import {
BoltIcon,
CheckIcon,
EllipsisVerticalIcon,
PencilIcon,
SparklesIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
@ -173,7 +174,7 @@ export const SinglePageBlock: React.FC<Props> = ({
});
};
const handelAutoGenerateDescription = async () => {
const handleAutoGenerateDescription = async () => {
if (!workspaceSlug || !projectId) return;
setIAmFeelingLucky(true);
@ -303,17 +304,19 @@ export const SinglePageBlock: React.FC<Props> = ({
{...provided.dragHandleProps}
>
<CreateUpdateBlockInline
handelAutoGenerateDescription={handelAutoGenerateDescription}
setGptAssistantModal={() => setGptAssistantModal((prev) => !prev)}
iAmFeelingLucky={iAmFeelingLucky}
handleClose={() => setCreateBlockForm(false)}
data={block}
setIsSyncing={setIsSyncing}
deletePageBlock={deletePageBlock}
handleBlockSync={handleBlockSync}
handleCopyText={handleCopyText}
pushBlockIntoIssues={pushBlockIntoIssues}
/>
</div>
) : (
<div
className={`group relative pl-6 ${
className={`group relative ${
snapshot.isDragging ? "border-2 bg-white border-theme shadow-lg rounded-md p-6" : ""
}`}
ref={provided.innerRef}
@ -321,13 +324,13 @@ export const SinglePageBlock: React.FC<Props> = ({
>
<button
type="button"
className="absolute top-4 -left-2 p-0.5 hover:bg-gray-100 rounded hidden group-hover:flex"
className="absolute top-4 -left-4 p-0.5 hover:bg-gray-100 rounded hidden group-hover:!flex"
{...provided.dragHandleProps}
>
<EllipsisVerticalIcon className="h-[18px]" />
<EllipsisVerticalIcon className="h-[18px] -ml-3" />
</button>
<div className="absolute top-4 right-0 items-center gap-2 hidden group-hover:flex bg-white pl-4">
<div className="absolute top-4 right-0 items-center gap-2 hidden group-hover:!flex bg-white pl-4">
{block.issue && block.sync && (
<div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-gray-100 py-1 px-1.5 text-xs">
{isSyncing ? (
@ -343,7 +346,7 @@ export const SinglePageBlock: React.FC<Props> = ({
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100 ${
iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
}`}
onClick={handelAutoGenerateDescription}
onClick={handleAutoGenerateDescription}
disabled={iAmFeelingLucky}
>
{iAmFeelingLucky ? (
@ -373,18 +376,32 @@ export const SinglePageBlock: React.FC<Props> = ({
{block.issue ? (
<>
<CustomMenu.MenuItem onClick={handleBlockSync}>
<>Turn sync {block.sync ? "off" : "on"}</>
<span className="flex items-center gap-1">
<ArrowPathIcon className="h-4 w-4" />
<span>Turn sync {block.sync ? "off" : "on"}</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center gap-1">
<LinkIcon className="h-4 w-4" />
Copy issue link
</span>
</CustomMenu.MenuItem>
</>
) : (
<CustomMenu.MenuItem onClick={pushBlockIntoIssues}>
<span className="flex items-center gap-1">
<LayerDiagonalIcon className="h-4 w-4" />
Push into issues
</span>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={deletePageBlock}>Delete block</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={deletePageBlock}>
<span className="flex items-center gap-1">
<TrashIcon className="h-4 w-4" />
Delete block
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
<div
@ -392,21 +409,34 @@ export const SinglePageBlock: React.FC<Props> = ({
snapshot.isDragging ? "" : "py-4 [&:not(:last-child)]:border-b"
}`}
>
<div
className="px-4 w-full overflow-hidden break-all cursor-pointer"
onClick={() => setCreateBlockForm(true)}
>
<div className="flex">
{block.issue && (
<Link href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}>
<a className="flex flex-shrink-0 items-center gap-1 rounded bg-gray-100 px-1.5 py-1 text-xs">
<div className="flex mr-1.5">
<Link
href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}
>
<a className="flex flex-shrink-0 items-center gap-1 rounded h-6 bg-gray-100 px-1.5 py-1 text-xs">
<LayerDiagonalIcon height="16" width="16" color="black" />
{projectDetails?.identifier}-{block.issue_detail?.sequence_id}
</a>
</Link>
</div>
)}
<h3
className="font-medium text-sm break-all"
onClick={() => setCreateBlockForm(true)}
>
<h3 className="font-medium text-base overflow-hidden max-w-[1000px]">
{block.name}
</h3>
</div>
{block?.description_stripped.length > 0 && (
<p className="mt-3 text-sm text-gray-500 font-normal h-5 truncate">
{block.description_stripped}
</p>
)}
</div>
</div>
<GptAssistantModal
block={block}
isOpen={gptAssistantModal}

17
apps/app/components/pages/single-page-detailed-item.tsx
View File

@ -17,7 +17,7 @@ import {
} from "@heroicons/react/24/outline";
// helpers
import { truncateText } from "helpers/string.helper";
import { renderShortTime } from "helpers/date-time.helper";
import { renderShortTime, renderShortDate } from "helpers/date-time.helper";
// types
import { IPage } from "types";
@ -44,12 +44,12 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
const { user } = useUser();
return (
<div className="relative first:rounded-t last:rounded-b border">
<div className="relative">
<Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
<a className="block p-4">
<a className="block py-4 px-6">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<p className="mr-2 truncate text-sm font-medium">{truncateText(page.name, 75)}</p>
<p className="mr-2 truncate text-xl font-semibold">{truncateText(page.name, 75)}</p>
{page.label_details.length > 0 &&
page.label_details.map((label) => (
<div
@ -74,7 +74,14 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
</div>
<div className="flex items-center gap-2">
<Tooltip
tooltipContent={`Last updated at ${
renderShortTime(page.updated_at) +
` ${new Date(page.updated_at).getHours() < 12 ? "am" : "pm"}`
} on ${renderShortDate(page.updated_at)}`}
>
<p className="text-sm text-gray-400">{renderShortTime(page.updated_at)}</p>
</Tooltip>
{page.is_favorite ? (
<button
type="button"
@ -153,7 +160,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
</CustomMenu>
</div>
</div>
<div className="relative mt-2 space-y-2 text-sm text-gray-600">
<div className="relative mt-2 space-y-2 text-base font-normal text-gray-600">
{page.blocks.length > 0
? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>)
: null}

14
apps/app/components/pages/single-page-list-item.tsx
View File

@ -16,6 +16,7 @@ import {
StarIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
import { PencilScribbleIcon } from "components/icons";
// helpers
import { truncateText } from "helpers/string.helper";
import { renderShortDate, renderShortTime } from "helpers/date-time.helper";
@ -48,11 +49,13 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
<li>
<Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
<a>
<div className="relative rounded p-4 hover:bg-gray-100">
<div className="relative rounded p-4 hover:bg-[#E9ECEF]">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<DocumentTextIcon className="h-4 w-4" />
<p className="mr-2 truncate text-sm font-medium">{truncateText(page.name, 75)}</p>
<PencilScribbleIcon className="h-4 w-4" />
<p className="mr-2 truncate text-base text-[#212529] font-medium">
{truncateText(page.name, 75)}
</p>
{page.label_details.length > 0 &&
page.label_details.map((label) => (
<div
@ -78,9 +81,8 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
<div className="ml-2 flex flex-shrink-0">
<div className="flex items-center gap-2">
<Tooltip
tooltipContent={`Last updated at ${renderShortTime(
page.updated_at
)} ${renderShortDate(page.updated_at)}`}
tooltipContent={`Last updated at ${
renderShortTime(page.updated_at)} on ${renderShortDate(page.updated_at)}`}
>
<p className="text-sm text-gray-400">{renderShortTime(page.updated_at)}</p>
</Tooltip>

72
apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View File

@ -33,12 +33,12 @@ import {
LockClosedIcon,
LockOpenIcon,
PlusIcon,
ShareIcon,
StarIcon,
LinkIcon
} from "@heroicons/react/24/outline";
import { ColorPalletteIcon } from "components/icons";
import { ColorPalletteIcon, ClipboardIcon } from "components/icons";
// helpers
import { renderShortTime } from "helpers/date-time.helper";
import { renderShortTime, renderShortDate } from "helpers/date-time.helper";
import { copyTextToClipboard } from "helpers/string.helper";
import { orderArrayBy } from "helpers/array.helper";
// types
@ -155,7 +155,13 @@ const SinglePage: NextPage = () => {
is_favorite: true,
}),
false
);
).then(() => {
setToastAlert({
type: "success",
title: "Success",
message: "Added to favorites",
});
});;
pagesService.addPageToFavorites(workspaceSlug as string, projectId as string, {
page: pageId as string,
@ -172,13 +178,16 @@ const SinglePage: NextPage = () => {
is_favorite: false,
}),
false
);
).then(() => {
setToastAlert({
type: "success",
title: "Success",
message: "Removed from favorites",
});
});;
pagesService.removePageFromFavorites(
workspaceSlug as string,
projectId as string,
pageId as string
);
pagesService
.removePageFromFavorites(workspaceSlug as string, projectId as string, pageId as string);
};
const handleOnDragEnd = (result: DropResult) => {
@ -345,10 +354,10 @@ const SinglePage: NextPage = () => {
customButton={
<button
type="button"
className="flex items-center gap-1 rounded-md bg-gray-100 px-3 py-1.5 text-xs hover:bg-gray-200"
className="flex items-center gap-1 rounded-full bg-gray-100 px-2 pr-2.5 py-1 text-xs hover:bg-gray-200"
>
<PlusIcon className="h-3 w-3" />
Add new label
Add label
</button>
}
value={pageDetails.labels}
@ -359,19 +368,17 @@ const SinglePage: NextPage = () => {
/>
)}
</div>
<div className="flex items-center gap-4">
<div className="flex items-center gap-6">
<Tooltip
tooltipContent={`Page last updated at ${renderShortTime(pageDetails.updated_at)}`}
theme="dark"
tooltipContent={`Last updated at ${renderShortTime(
pageDetails.updated_at
)} on ${renderShortDate(pageDetails.updated_at)}`}
>
<span className="cursor-default text-sm text-gray-500">
{renderShortTime(pageDetails.updated_at)}
</span>
<p className="text-sm text-gray-500">{renderShortTime(pageDetails.updated_at)}</p>
</Tooltip>
<PrimaryButton className="flex items-center gap-2" onClick={handleCopyText}>
<ShareIcon className="h-4 w-4" />
Share
</PrimaryButton>
<button className="flex items-center gap-2" onClick={handleCopyText}>
<LinkIcon className="h-4 w-4" />
</button>
<div className="flex-shrink-0">
<Popover className="relative grid place-items-center">
{({ open }) => (
@ -415,7 +422,14 @@ const SinglePage: NextPage = () => {
</Popover>
</div>
{pageDetails.created_by === user?.id && (
<>
<Tooltip
tooltipContent={`${
pageDetails.access
? "This page is only visible to you."
: "This page can be viewed by anyone in the project."
}`}
theme="dark"
>
{pageDetails.access ? (
<button onClick={() => partialUpdatePage({ access: 0 })} className="z-10">
<LockClosedIcon className="h-4 w-4" />
@ -429,7 +443,7 @@ const SinglePage: NextPage = () => {
<LockOpenIcon className="h-4 w-4" />
</button>
)}
</>
</Tooltip>
)}
{pageDetails.is_favorite ? (
<button onClick={handleRemoveFromFavorites} className="z-10">
@ -442,20 +456,20 @@ const SinglePage: NextPage = () => {
)}
</div>
</div>
<div>
<div className="px-4 pt-6">
<TextArea
id="name"
name="name"
placeholder="Enter issue name"
placeholder="Page Title"
value={watch("name")}
onBlur={handleSubmit(updatePage)}
onChange={(e) => setValue("name", e.target.value)}
required={true}
className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-semibold outline-none ring-0 focus:ring-1 focus:ring-gray-200"
className="min-h-10 block w-full resize-none overflow-hidden placeholder:text-[#858E96] rounded border-none bg-transparent px-3 py-2 text-3xl font-semibold outline-none ring-0 "
role="textbox"
/>
</div>
<div className="px-3">
<div className="px-7">
{pageBlocks ? (
<>
<DragDropContext onDragEnd={handleOnDragEnd}>
@ -481,7 +495,7 @@ const SinglePage: NextPage = () => {
{!createBlockForm && (
<button
type="button"
className="flex items-center gap-1 rounded bg-gray-100 px-2.5 py-1 ml-6 text-xs hover:bg-gray-200 mt-4"
className="flex items-center gap-1 rounded-full bg-gray-100 px-2 py-1 pr-2.5 text-xs hover:bg-gray-200 mt-4"
onClick={handleNewBlock}
>
<PlusIcon className="h-3 w-3" />

16
apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
View File

@ -177,24 +177,28 @@ const ProjectPages: NextPage = () => {
<div className="space-y-4">
<form
onSubmit={handleSubmit(createPage)}
className="flex items-center justify-between gap-2 rounded-[10px] border border-gray-200 bg-white p-2 shadow-sm"
className="flex relative justify-between gap-2 mb-12 rounded-[6px] h-[80px] border border-gray-200 bg-white p-2 shadow-md"
>
<Input
type="text"
name="name"
register={register}
className="border-none outline-none focus:ring-0"
placeholder="Type to create a new page..."
className="border-none text-start font-semibold flex break-all text-2xl outline-none focus:ring-0"
placeholder="Title"
/>
{watch("name") !== "" && (
<PrimaryButton type="submit" loading={isSubmitting}>
<PrimaryButton
type="submit"
loading={isSubmitting}
className="h-8 absolute top-6 right-2"
>
{isSubmitting ? "Creating..." : "Create"}
</PrimaryButton>
)}
</form>
<div>
<Tab.Group>
<Tab.List as="div" className="flex items-center justify-between">
<Tab.List as="div" className="flex items-center justify-between mb-6">
<div className="flex gap-4">
{["Recent", "All", "Favorites", "Created by me", "Created by others"].map(
(tab, index) => (
@ -213,7 +217,7 @@ const ProjectPages: NextPage = () => {
)
)}
</div>
<div className="flex items-center gap-x-1">
<div className="flex 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 ${