feat(hackathon): draft data table column & API Contract
This commit is contained in:
@@ -1,41 +0,0 @@
|
||||
import { FC } from 'react';
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const ModalDeleteUser: FC<ModalProps> = ({ isOpen, onClose }) => {
|
||||
if (!isOpen) return null;
|
||||
return (
|
||||
<div className="fixed inset-0 z-50">
|
||||
<div className="fixed inset-0 bg-black/50" onClick={onClose} />
|
||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-lg shadow w-full max-w-md">
|
||||
<div className="border-b px-6 py-4 flex justify-between items-center">
|
||||
<h2 className="text-p3 font-semibold">Delete User</h2>
|
||||
<button className="p-2" onClick={onClose}>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<p className="text-label2 text-neutral-700">
|
||||
Are you sure you want to delete this user? This action cannot be
|
||||
undone.
|
||||
</p>
|
||||
<div className="flex justify-end gap-2 mt-4">
|
||||
<button className="px-3 py-2 rounded-md border" onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
<button className="px-3 py-2 rounded-md bg-red-600 text-white">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalDeleteUser;
|
||||
@@ -1,42 +0,0 @@
|
||||
import { FC } from 'react';
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const ModalSuspendOrBan: FC<ModalProps> = ({ isOpen, onClose }) => {
|
||||
if (!isOpen) return null;
|
||||
return (
|
||||
<div className="fixed inset-0 z-50">
|
||||
<div className="fixed inset-0 bg-black/50" onClick={onClose} />
|
||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-lg shadow w-full max-w-lg">
|
||||
<div className="border-b px-6 py-4 flex justify-between items-center">
|
||||
<h2 className="text-p3 font-semibold">Suspend or Ban User</h2>
|
||||
<button className="p-2" onClick={onClose}>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-6 flex flex-col gap-4">
|
||||
<label className="text-label2 text-neutral-700">Reason</label>
|
||||
<textarea
|
||||
className="border border-neutral-200 rounded-md px-3 py-2"
|
||||
rows={4}
|
||||
/>
|
||||
<div className="flex justify-end gap-2 mt-2">
|
||||
<button className="px-3 py-2 rounded-md border" onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
<button className="px-3 py-2 rounded-md bg-amber-600 text-white">
|
||||
Suspend
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalSuspendOrBan;
|
||||
@@ -1,47 +0,0 @@
|
||||
import { FC } from 'react';
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose }) => {
|
||||
if (!isOpen) return null;
|
||||
return (
|
||||
<div className="fixed inset-0 z-50">
|
||||
<div className="fixed inset-0 bg-black/50" onClick={onClose} />
|
||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-lg shadow w-full max-w-3xl">
|
||||
<div className="border-b px-6 py-4 flex justify-between items-center">
|
||||
<h2 className="text-p3 font-semibold">User Detail</h2>
|
||||
<button className="p-2" onClick={onClose}>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3 className="text-label1 font-medium mb-2">Account Profile</h3>
|
||||
<div className="text-label2 text-neutral-600">
|
||||
Email, provider, createdAt
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-label1 font-medium mb-2">Detail Profile</h3>
|
||||
<div className="text-label2 text-neutral-600">
|
||||
Name, phone, city
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<h3 className="text-label1 font-medium mb-2">Activity Log</h3>
|
||||
<div className="text-label2 text-neutral-600">
|
||||
Recent actions...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalUserDetail;
|
||||
Reference in New Issue
Block a user