mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-11-13 15:51:00 +00:00
Maurice
2a05e6d20d
Both previews built the same dialog head band with the file name, the open in tab pill and the download pill. FilePreviewDialog now draws it; the dialog width, the body class and the icon colour stay parameters, and each preview keeps its own body.
73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import { Download, ExternalLink, FileText } from 'lucide-react';
|
|
import type { ReactNode } from 'react';
|
|
import { useId } from 'react';
|
|
import type { DialogShellProps } from '../shared/DialogShell';
|
|
import { DialogHeader, DialogShell, DialogTile, NEUTRAL_TINT, PILL } from '../shared/DialogShell';
|
|
import { triggerDownload } from './FileManager.helpers';
|
|
|
|
interface FilePreviewDialogProps {
|
|
/** The file's name, on the head band. */
|
|
name: string;
|
|
/** The stored url the download pill fetches. */
|
|
url: string;
|
|
onClose: () => void;
|
|
onOpenInTab: () => void;
|
|
t: (key: string) => string;
|
|
width: DialogShellProps['width'];
|
|
bodyClassName: string;
|
|
/** The colour of the file icon on the tile. */
|
|
iconClassName: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* The dialog a file is read in: its name on the head band, open in a new tab
|
|
* and download beside it. Each preview brings its own body.
|
|
*/
|
|
export function FilePreviewDialog({
|
|
name,
|
|
url,
|
|
onClose,
|
|
onOpenInTab,
|
|
t,
|
|
width,
|
|
bodyClassName,
|
|
iconClassName,
|
|
children,
|
|
}: FilePreviewDialogProps) {
|
|
const labelId = useId();
|
|
return (
|
|
<DialogShell
|
|
onClose={onClose}
|
|
labelledBy={labelId}
|
|
width={width}
|
|
bodyClassName={bodyClassName}
|
|
header={
|
|
<DialogHeader
|
|
tile={
|
|
<DialogTile>
|
|
<FileText size={20} strokeWidth={1.9} className={iconClassName} />
|
|
</DialogTile>
|
|
}
|
|
tint={NEUTRAL_TINT}
|
|
labelId={labelId}
|
|
onClose={onClose}
|
|
title={name}
|
|
pills={
|
|
<>
|
|
<button type="button" onClick={onOpenInTab} className={`${PILL} hover:opacity-80`}>
|
|
<ExternalLink size={13} strokeWidth={2.2} /> {t('files.openTab')}
|
|
</button>
|
|
<button type="button" onClick={() => triggerDownload(url, name)} className={`${PILL} hover:opacity-80`}>
|
|
<Download size={13} strokeWidth={2.2} /> {t('files.download') || 'Download'}
|
|
</button>
|
|
</>
|
|
}
|
|
/>
|
|
}
|
|
>
|
|
{children}
|
|
</DialogShell>
|
|
);
|
|
}
|