grid: fixing type issues in suspend and handling in app info header

This commit is contained in:
Hunter Miller 2021-10-25 12:58:25 -05:00
parent 7e7d938720
commit 2ccfcd9d7f
3 changed files with 8 additions and 6 deletions

View File

@ -1,21 +1,22 @@
import React from 'react'; import React from 'react';
import { Docket } from '@urbit/api/docket';
import { DocketImage } from './DocketImage'; import { DocketImage } from './DocketImage';
import { getAppName } from '../state/util';
import { DocketWithDesk } from '../state/docket';
interface DocketHeaderProps { interface DocketHeaderProps {
docket: Docket; docket: DocketWithDesk;
children?: React.ReactNode; children?: React.ReactNode;
} }
export function DocketHeader(props: DocketHeaderProps) { export function DocketHeader(props: DocketHeaderProps) {
const { docket, children } = props; const { docket, children } = props;
const { info, title, image, color } = docket; const { info, image, color } = docket;
return ( return (
<header className="grid grid-cols-[5rem,1fr] md:grid-cols-[8rem,1fr] auto-rows-min grid-flow-row-dense mb-5 sm:mb-8 gap-x-6 gap-y-4"> <header className="grid grid-cols-[5rem,1fr] md:grid-cols-[8rem,1fr] auto-rows-min grid-flow-row-dense mb-5 sm:mb-8 gap-x-6 gap-y-4">
<DocketImage color={color} image={image} className="row-span-1 md:row-span-2" /> <DocketImage color={color} image={image} className="row-span-1 md:row-span-2" />
<div className="col-start-2"> <div className="col-start-2">
<h1 className="h2">{title}</h1> <h1 className="h2">{getAppName(docket)}</h1>
{info && <p className="h4 mt-2 text-gray-500">{info}</p>} {info && <p className="h4 mt-2 text-gray-500">{info}</p>}
</div> </div>
{children} {children}

View File

@ -1,4 +1,4 @@
interface ImportMetaEnv extends Readonly<Record<string, string>> { interface ImportMetaEnv extends Readonly<Record<string, string | boolean | undefined>> {
readonly VITE_LAST_WIPE: string; readonly VITE_LAST_WIPE: string;
readonly VITE_STORAGE_VERSION: string; readonly VITE_STORAGE_VERSION: string;
} }

View File

@ -4,6 +4,7 @@ import { Button } from '../components/Button';
import { Dialog, DialogClose, DialogContent } from '../components/Dialog'; import { Dialog, DialogClose, DialogContent } from '../components/Dialog';
import { useRecentsStore } from '../nav/search/Home'; import { useRecentsStore } from '../nav/search/Home';
import useDocketState, { useCharges } from '../state/docket'; import useDocketState, { useCharges } from '../state/docket';
import { getAppName } from '../state/util';
export const SuspendApp = () => { export const SuspendApp = () => {
const history = useHistory(); const history = useHistory();
@ -34,7 +35,7 @@ export const SuspendApp = () => {
Cancel Cancel
</DialogClose> </DialogClose>
<DialogClose as={Button} onClick={handleSuspendApp}> <DialogClose as={Button} onClick={handleSuspendApp}>
Suspend &ldquo;{getAppName(docket)}&rdquo; Suspend &ldquo;{getAppName(charge)}&rdquo;
</DialogClose> </DialogClose>
</div> </div>
</DialogContent> </DialogContent>