106 lines
2.5 KiB
JavaScript
106 lines
2.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { createCafe } from '../helpers/cafeHelpers'; // Adjust the import path as needed
|
|
|
|
const CreateClerk = ({ shopId }) => {
|
|
const [name, setName] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [message, setMessage] = useState('');
|
|
|
|
const handleSubmit = async (event) => {
|
|
event.preventDefault();
|
|
setLoading(true);
|
|
setMessage('');
|
|
|
|
// Basic validation
|
|
if (!name) {
|
|
setMessage('name is required');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const create = await createCafe(name);
|
|
|
|
if (create) setMessage('Cafe created successfully');
|
|
else setMessage('Failed to create clerk');
|
|
} catch (error) {
|
|
setMessage('Error creating clerk');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={styles.container}>
|
|
<h2 style={styles.header}>Tambah Kedai</h2>
|
|
<form onSubmit={handleSubmit} style={styles.form}>
|
|
<input
|
|
type="text"
|
|
placeholder="Cafe name"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
style={styles.input}
|
|
/>
|
|
<button type="submit" style={styles.button} disabled={loading}>
|
|
{loading ? 'Creating...' : 'Create Clerk'}
|
|
</button>
|
|
{message && (
|
|
<p style={{ ...styles.message, color: message.includes('success') ? 'green' : 'red' }}>
|
|
{message}
|
|
</p>
|
|
)}
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Basic styling to make it mobile-friendly with a white background
|
|
const styles = {
|
|
container: {
|
|
backgroundColor: '#fff',
|
|
width: '100%',
|
|
maxWidth: '350px',
|
|
margin: '0 auto',
|
|
padding: '20px',
|
|
boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
|
|
borderRadius: '8px',
|
|
boxSizing: 'border-box',
|
|
},
|
|
header: {
|
|
textAlign: 'center',
|
|
marginBottom: '20px',
|
|
fontSize: '20px',
|
|
color: '#333',
|
|
},
|
|
form: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '15px',
|
|
},
|
|
input: {
|
|
padding: '12px',
|
|
fontSize: '16px',
|
|
borderRadius: '8px',
|
|
border: '1px solid #ccc',
|
|
width: '100%',
|
|
boxSizing: 'border-box',
|
|
backgroundColor: '#f9f9f9',
|
|
},
|
|
button: {
|
|
padding: '12px',
|
|
fontSize: '16px',
|
|
borderRadius: '8px',
|
|
border: 'none',
|
|
backgroundColor: '#28a745',
|
|
color: 'white',
|
|
cursor: 'pointer',
|
|
width: '100%',
|
|
},
|
|
message: {
|
|
textAlign: 'center',
|
|
marginTop: '10px',
|
|
},
|
|
};
|
|
|
|
export default CreateClerk;
|