dvirlabs/snapix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Back to native select and option

Browse Source
This commit is contained in:
dvirlabs 2025-06-11 04:54:20 +03:00
parent 5c6cbb5195
commit 0e55ff2568
2 changed files with 81 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/components/BackupForm.jsx
View File

@ -1,6 +1,6 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { getNamespaces, getPVCs, createBackup } from '../api/snapix'; import { getNamespaces, getPVCs, createBackup } from '../api/snapix';
import { Button, Select, Option, Input } from '@mui/base' import { Button, Input } from '@mui/base';
export default function BackupForm() { export default function BackupForm() {
const [namespaces, setNamespaces] = useState([]); const [namespaces, setNamespaces] = useState([]);
@ -28,47 +28,57 @@ export default function BackupForm() {
pvc_name: selectedPvc, pvc_name: selectedPvc,
backup_name: backupName, backup_name: backupName,
}).then(() => { }).then(() => {
alert("Backup started!"); alert('Backup started!');
setBackupName(''); setBackupName('');
}); });
} }
}; };
return ( return (
<div className='form-group'> <div className="form-group">
<h2>📦 Backup PVC</h2> <h2>📦 Backup PVC</h2>
<div className='form-content'> <div className="form-content">
<label>Namespace:</label> <label>Namespace:</label>
<Select onChange={e => setSelectedNs(e.target.value)} value={selectedNs}> <select value={selectedNs} onChange={(e) => setSelectedNs(e.target.value)}>
<Option value="">-- Select Namespace --</Option> <option value="">-- Select Namespace --</option>
{namespaces.map(ns => <Option key={ns}>{ns}</Option>)} {namespaces.map(ns => (
</Select> <option key={ns} value={ns}>
{ns}
</option>
))}
</select>
</div> </div>
<div className='form-content'> <div className="form-content">
<label>PVC:</label> <label>PVC:</label>
<Select <select
onChange={e => setSelectedPvc(e.target.value)}
value={selectedPvc} value={selectedPvc}
onChange={(e) => setSelectedPvc(e.target.value)}
disabled={!selectedNs} disabled={!selectedNs}
> >
<Option value="">-- Select PVC --</Option> <option value="">-- Select PVC --</option>
{pvcs.map(pvc => <Option key={pvc}>{pvc}</Option>)} {pvcs.map(pvc => (
</Select> <option key={pvc} value={pvc}>
{pvc}
</option>
))}
</select>
</div> </div>
<div className='form-content'> <div className="form-content">
<label>Backup Name:</label> <label>Backup Name:</label>
<Input <Input
type="text" type="text"
value={backupName} value={backupName}
onChange={e => setBackupName(e.target.value)} onChange={(e) => setBackupName(e.target.value)}
placeholder="e.g. git-bkp" placeholder="e.g. git-bkp"
/> />
</div> </div>
<Button className='btn' onClick={handleSubmit}>Create Backup</Button>
<Button className="btn" onClick={handleSubmit}>
Create Backup
</Button>
</div> </div>
); );
} }

43
frontend/src/style/global.css
View File

@ -7,11 +7,11 @@ h2 {
border-radius: 8px; border-radius: 8px;
padding: 13px; padding: 13px;
margin: 10px; margin: 10px;
height: 400px; height: auto;
width: 500px; width: 500px;
flex: 1; flex: 1;
max-width: 500px; max-width: 500px;
min-width: 500px; min-width: 300px;
} }
.form-content { .form-content {
@ -20,7 +20,9 @@ h2 {
padding: 10px; padding: 10px;
} }
input { /* Unified input/select styling */
input,
select {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
background-color: #1a1a1a; background-color: #1a1a1a;
@ -29,13 +31,46 @@ input {
color: white; color: white;
font-size: 1rem; font-size: 1rem;
box-sizing: border-box; box-sizing: border-box;
appearance: none;
} }
input:hover { input:hover,
select:hover {
border-color: #1a73e8; border-color: #1a73e8;
} }
input:disabled,
select:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn { .btn {
background-color: #4CAF50; background-color: #4CAF50;
color: white;
margin-top: 30px; margin-top: 30px;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
}
.btn:hover {
background-color: #45a049;
}
/* Scrollbar inside <select> dropdown (some browsers only) */
select {
scrollbar-color: #666 #1a1a1a;
scrollbar-width: thin;
}
select::-webkit-scrollbar {
width: 6px;
}
select::-webkit-scrollbar-thumb {
background-color: #666;
border-radius: 4px;
} }