46 lines
2.0 KiB
TypeScript
46 lines
2.0 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { useDevStore } from './store';
|
|
import { Card, CardContent } from '@mui/material';
|
|
|
|
export const App = () => {
|
|
const store = useDevStore();
|
|
useEffect(() => {
|
|
store.getList();
|
|
}, []);
|
|
return (
|
|
<div className='bg-slate-200 p-4 w-full h-full'>
|
|
{store.list.map((item) => {
|
|
const data = item.data;
|
|
return (
|
|
<Card key={item.id} className='w-[600px]' style={{ marginBottom: '16px' }}>
|
|
<CardContent>
|
|
<div className='relative group' style={{ fontWeight: 'bold', marginBottom: '8px' }}>
|
|
<div>Code</div>
|
|
<div className='hidden group-hover:block absolute z-10 top-0 left-0 rounded-lg'>
|
|
<div className='bg-slate-100 p-2 rounded-md whitespace-pre-wrap'>{data.code}</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ fontWeight: 'bold', marginBottom: '8px' }}>Type</div>
|
|
<div style={{ marginBottom: '8px' }}>{data.type}</div>
|
|
<div style={{ fontWeight: 'bold', marginBottom: '8px' }}>CWD</div>
|
|
<div style={{ marginBottom: '8px' }}>{data.cwd}</div>
|
|
<div style={{ fontWeight: 'bold', marginBottom: '8px' }}>Status</div>
|
|
<div style={{ marginBottom: '8px' }}>{data.status}</div>
|
|
<div style={{ fontWeight: 'bold', marginBottom: '8px' }}>Code Hash</div>
|
|
<div style={{ marginBottom: '8px' }}>{data.codeHash}</div>
|
|
<div style={{ fontWeight: 'bold', marginBottom: '8px' }}>Code Path</div>
|
|
<div style={{ marginBottom: '8px' }}>{data.codePath}</div>
|
|
<div style={{ fontWeight: 'bold', marginBottom: '8px' }}>Command</div>
|
|
<div style={{ marginBottom: '8px' }}>{data.command}</div>
|
|
<div style={{ fontWeight: 'bold', marginBottom: '8px' }}>Code Status</div>
|
|
<div style={{ marginBottom: '8px' }}>{data.codeStatus}</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|