forked from github/plane
69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
import { observer } from "mobx-react-lite";
|
|
// components
|
|
import {
|
|
PeekOverviewHeader,
|
|
PeekOverviewIssueActivity,
|
|
PeekOverviewIssueDetails,
|
|
PeekOverviewIssueProperties,
|
|
} from "components/issues/peek-overview";
|
|
// types
|
|
import { Loader } from "components/ui/loader";
|
|
import { IIssue } from "types/issue";
|
|
|
|
type Props = {
|
|
handleClose: () => void;
|
|
issueDetails: IIssue | undefined;
|
|
};
|
|
|
|
export const FullScreenPeekView: React.FC<Props> = observer((props) => {
|
|
const { handleClose, issueDetails } = props;
|
|
|
|
return (
|
|
<div className="grid h-full w-full grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
|
|
<div className="col-span-7 flex h-full w-full flex-col overflow-hidden">
|
|
<div className="w-full p-5">
|
|
<PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
|
|
</div>
|
|
{issueDetails ? (
|
|
<div className="h-full w-full overflow-y-auto px-6">
|
|
{/* issue title and description */}
|
|
<div className="w-full">
|
|
<PeekOverviewIssueDetails issueDetails={issueDetails} />
|
|
</div>
|
|
{/* divider */}
|
|
<div className="my-5 h-[1] w-full border-t border-custom-border-200" />
|
|
{/* issue activity/comments */}
|
|
<div className="w-full pb-5">
|
|
<PeekOverviewIssueActivity issueDetails={issueDetails} />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<Loader className="px-6">
|
|
<Loader.Item height="30px" />
|
|
<div className="mt-3 space-y-2">
|
|
<Loader.Item height="20px" width="70%" />
|
|
<Loader.Item height="20px" width="60%" />
|
|
<Loader.Item height="20px" width="60%" />
|
|
</div>
|
|
</Loader>
|
|
)}
|
|
</div>
|
|
<div className="col-span-3 h-full w-full overflow-y-auto">
|
|
{/* issue properties */}
|
|
<div className="w-full px-6 py-5">
|
|
{issueDetails ? (
|
|
<PeekOverviewIssueProperties issueDetails={issueDetails} />
|
|
) : (
|
|
<Loader className="mt-11 space-y-4">
|
|
<Loader.Item height="30px" />
|
|
<Loader.Item height="30px" />
|
|
<Loader.Item height="30px" />
|
|
<Loader.Item height="30px" />
|
|
</Loader>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|