binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

19
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">
<p className="text-sm text-gray-400">{renderShortTime(page.updated_at)}</p>
<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}