[WEB-2273] Chore: header UI (#5467)

* chore: headers + common containers

* fix: filters code splitting

* fix: home header

* fix: header changes

* fix: uncommented filters

* fix: used enums

* fix: enum changes
This commit is contained in:
Akshita Goyal 2024-09-04 14:38:30 +05:30 committed by GitHub
parent 747905a96d
commit 22656d0114
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
64 changed files with 1356 additions and 1119 deletions

View file

@ -7,7 +7,7 @@ import Link from "next/link";
import { useParams } from "next/navigation";
import { ChevronDown, PanelRight } from "lucide-react";
import { IUserProfileProjectSegregation } from "@plane/types";
import { Breadcrumbs, CustomMenu, UserActivityIcon } from "@plane/ui";
import { Breadcrumbs, CustomHeader, CustomMenu, UserActivityIcon } from "@plane/ui";
import { BreadcrumbLink } from "@/components/common";
// components
import { ProfileIssuesFilter } from "@/components/profile";
@ -46,8 +46,8 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
const breadcrumbLabel = `${isCurrentUser ? "Your" : userName} Work`;
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<CustomHeader>
<CustomHeader.LeftItem>
<div className="flex w-full justify-between">
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
@ -104,7 +104,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
</button>
</div>
</div>
</div>
</div>
</CustomHeader.LeftItem>
</CustomHeader>
);
});

View file

@ -5,6 +5,7 @@ import { useParams, usePathname } from "next/navigation";
// components
// constants
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";
type Props = {
@ -20,7 +21,7 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;
return (
<div className="sticky -top-0.5 hidden md:flex items-center justify-between gap-4 border-b border-custom-border-300 bg-custom-background-100 px-4 sm:px-5 md:static">
<CustomHeader variant={EHeaderVariant.SECONDARY} className="sticky -top-0.5 hidden md:flex md:static">
<div className="flex items-center overflow-x-scroll">
{tabsList.map((tab) => (
<Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}>
@ -36,6 +37,6 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
</Link>
))}
</div>
</div>
</CustomHeader>
);
};