42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { inboxApi } from '../../api.js';
|
|
|
|
interface AppInfo {
|
|
version: string;
|
|
electron: string;
|
|
node: string;
|
|
os: string;
|
|
profileDir: string;
|
|
}
|
|
|
|
export function InfoSection(): React.ReactElement {
|
|
const [info, setInfo] = useState<AppInfo | null>(null);
|
|
|
|
useEffect(() => {
|
|
void (async () => setInfo(await inboxApi.getAppInfo()))();
|
|
}, []);
|
|
|
|
if (!info) return <div style={{ fontSize: 12 }}>로딩 중...</div>;
|
|
|
|
return (
|
|
<div>
|
|
<dl style={{ fontSize: 12, lineHeight: 1.6 }}>
|
|
<dt style={{ fontWeight: 600 }}>버전</dt>
|
|
<dd>{info.version}</dd>
|
|
<dt style={{ fontWeight: 600 }}>Electron</dt>
|
|
<dd>{info.electron}</dd>
|
|
<dt style={{ fontWeight: 600 }}>Node</dt>
|
|
<dd>{info.node}</dd>
|
|
<dt style={{ fontWeight: 600 }}>OS</dt>
|
|
<dd>{info.os}</dd>
|
|
<dt style={{ fontWeight: 600 }}>데이터 위치</dt>
|
|
<dd style={{ wordBreak: 'break-all' }}>{info.profileDir}</dd>
|
|
</dl>
|
|
<div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
|
|
<button onClick={() => void inboxApi.openProfileDir()}>데이터 위치 열기</button>
|
|
<button onClick={() => void inboxApi.copyAppInfo()}>정보 복사</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|