sigit/sigit.io
7
2
Fork 0
Code Issues 51 Pull Requests 3 Actions Packages Projects 1 Releases Wiki Activity

feat(create-page): new create page design #153

Merged
enes merged 17 commits from 148-create-page into staging 2024-08-20 12:43:20 +00:00
Conversation 0 Commits 17 Files Changed 17 +78 -84
2 changed files with 78 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c2199b79bd - Show all commits

143
src/pages/create/index.tsx
View File

@ -6,7 +6,6 @@ import {
IconButton,
InputLabel,
MenuItem,
Paper,
Select,
Table,
TableBody,
@ -705,99 +704,87 @@ export const CreatePage = () => {
<Container className={styles.container}>
<StickySideColumns
left={
<>
<div className={styles.flexWrap}>
<TextField
label="Title"
value={title}
onChange={(e) => setTitle(e.target.value)}
variant="outlined"
/>
<Box>
<MuiFileInput
fullWidth
multiple
placeholder="Choose Files"
value={selectedFiles}
onChange={(value) => handleSelectFiles(value)}
/>
{selectedFiles.length > 0 && (
<ul>
{selectedFiles.map((file, index) => (
<li key={index}>
<Typography component="label">{file.name}</Typography>
<IconButton onClick={() => handleRemoveFile(file)}>
<Clear style={{ color: 'red' }} />{' '}
</IconButton>
</li>
))}
</ul>
)}
</Box>
</>
<ul className={styles.paperGroup}>
{selectedFiles.length > 0 &&
selectedFiles.map((file, index) => (
<li key={index}>
<Typography component="label">{file.name}</Typography>
<IconButton onClick={() => handleRemoveFile(file)}>
<Clear style={{ color: 'red' }} />{' '}
</IconButton>
</li>
))}
</ul>
<MuiFileInput
fullWidth
multiple
placeholder="Choose Files"
value={selectedFiles}
onChange={(value) => handleSelectFiles(value)}
/>
</div>
}
right={
<>
<div className={styles.flexWrap}>
<Typography component="label" variant="h6">
Add Counterparts
</Typography>
<Box className={styles.inputBlock}>
<Box className={styles.inputBlock}>
<TextField
label="nip05 / npub"
value={userInput}
onChange={(e) => setUserInput(e.target.value)}
helperText={error}
error={!!error}
/>
<FormControl fullWidth>
<InputLabel id="select-role-label">Role</InputLabel>
<Select
labelId="select-role-label"
id="demo-simple-select"
value={userRole}
label="Role"
onChange={(e) => setUserRole(e.target.value as UserRole)}
>
<MenuItem value={UserRole.signer}>
{UserRole.signer}
</MenuItem>
<MenuItem value={UserRole.viewer}>
{UserRole.viewer}
</MenuItem>
</Select>
</FormControl>
<Box
sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}
<Box className={styles.paperGroup}>
<TextField
label="nip05 / npub"
value={userInput}
onChange={(e) => setUserInput(e.target.value)}
helperText={error}
error={!!error}
/>
<FormControl fullWidth>
<InputLabel id="select-role-label">Role</InputLabel>
<Select
labelId="select-role-label"
id="demo-simple-select"
value={userRole}
label="Role"
onChange={(e) => setUserRole(e.target.value as UserRole)}
>
<Button
disabled={!userInput}
onClick={handleAddUser}
variant="contained"
>
Add
</Button>
</Box>
</Box>
<MenuItem value={UserRole.signer}>
{UserRole.signer}
</MenuItem>
<MenuItem value={UserRole.viewer}>
{UserRole.viewer}
</MenuItem>
</Select>
</FormControl>
<Button
disabled={!userInput}
onClick={handleAddUser}
variant="contained"
>
Add
</Button>
</Box>
<DisplayUser
metadata={metadata}
users={users}
handleUserRoleChange={handleUserRoleChange}
handleRemoveUser={handleRemoveUser}
moveSigner={moveSigner}
/>
<Box
sx={{ mt: 1, mb: 5, display: 'flex', justifyContent: 'center' }}
>
<div className={styles.paperGroup}>
<DisplayUser
metadata={metadata}
users={users}
handleUserRoleChange={handleUserRoleChange}
handleRemoveUser={handleRemoveUser}
moveSigner={moveSigner}
/>
<Button onClick={handleCreate} variant="contained">
Create
</Button>
</Box>
</>
</div>
</div>
}
>
<DrawPDFFields
@ -828,7 +815,7 @@ const DisplayUser = ({
moveSigner
}: DisplayUsersProps) => {
return (
<TableContainer component={Paper} elevation={3} sx={{ marginTop: '20px' }}>
<TableContainer>
<Table>
<TableHead>
<TableRow>

19
src/pages/create/style.module.scss
View File

@ -1,11 +1,18 @@
@import '../../styles/colors.scss';
.container {
.inputBlock {
display: flex;
flex-direction: column;
gap: 25px;
}
.flexWrap {
display: flex;
flex-direction: column;
gap: 15px;
}
.paperGroup {
border-radius: 4px;
background: white;
padding: 15px;
display: flex;
flex-direction: column;
gap: 15px;
}
.subHeader {