mirror of
https://github.com/cssgunc/compass.git
synced 2025-04-06 04:30:17 -04:00
Table styling
This commit is contained in:
Varun Murlidhar
parent
cd276935ef
commit
7e36404757
|
|
@ -28,11 +28,7 @@ interface EditContent {
|
|||
const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, editableContent, rowContent, onRowUpdate }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isFull, setIsFull] = useState(false);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editContents, setEditContents] = useState<EditContent[]>(editableContent || [{ content: '', isEditing: true }]);
|
||||
const [currentCardText, setCurrentCardText] = useState("");
|
||||
const [currentCardIcon, setCurrentCardIcon] = useState<string>('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isFavorite, setIsFavorite] = useState(false);
|
||||
const [tempRowContent, setTempRowContent] = useState(rowContent);
|
||||
|
||||
|
|
@ -66,55 +62,12 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
|
|||
const toggleDrawerFullScreen = () => setIsFull(!isFull);
|
||||
|
||||
const toggleFavorite = () => setIsFavorite(!isFavorite);
|
||||
|
||||
const handleCardClick = (text: string, icon: ReactElement) => {
|
||||
console.log('click')
|
||||
toggleDrawer();
|
||||
setCurrentCardText(text);
|
||||
setCurrentCardIcon(icon)};
|
||||
|
||||
const toggleEditing = () => setIsEditing(!isEditing);
|
||||
const handleInputChange = (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newContents = editContents.map((item, idx) => idx === index ? { ...item, content: event.target.value } : item);
|
||||
setEditContents(newContents);
|
||||
};
|
||||
const drawerClassName = `fixed top-0 right-0 h-full bg-white transform ease-in-out duration-300 ${
|
||||
isOpen ? "translate-x-0 shadow-xl" : "translate-x-full"
|
||||
|
||||
} ${isFull ? "w-full" : "w-1/2"}`;
|
||||
|
||||
const addInput = () => {
|
||||
setEditContents([...editContents, { content: '', isEditing: true }]);
|
||||
};
|
||||
|
||||
const saveIndividualChange = (index: number) => {
|
||||
const content = editContents[index].content.trim();
|
||||
if (!content) {
|
||||
setError("Input cannot be empty.");
|
||||
return;
|
||||
}
|
||||
|
||||
setError(null); // Clear error state if input passes validation
|
||||
|
||||
const updatedContents = editContents.map((item, idx) => idx === index ? { ...item, isEditing: false } : item);
|
||||
setEditContents(updatedContents);
|
||||
|
||||
if (onSave) {
|
||||
onSave(updatedContents);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleEdit = (index: number) => {
|
||||
const newContents = editContents.map((item, idx) => idx === index ? { ...item, isEditing: !item.isEditing } : item);
|
||||
setEditContents(newContents);
|
||||
};
|
||||
|
||||
const deleteInput = (index: number) => {
|
||||
// Filter out the input at the given index
|
||||
const filteredContents = editContents.filter((_, idx) => idx !== index);
|
||||
setEditContents(filteredContents);
|
||||
};
|
||||
|
||||
const iconComponent = isFull ? <ArrowsPointingInIcon className="h-5 w-5" /> : <ArrowsPointingOutIcon className="h-5 w-5" />;
|
||||
|
||||
const favoriteIcon = isFavorite ? <SolidStarIcon className="h-5 w-5" /> : <OutlineStarIcon className="h-5 w-5" />
|
||||
|
|
@ -128,7 +81,7 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
|
|||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<div className="flex flex-row items-center justify-between space-x-2">
|
||||
<span className="h-5 text-purple-700 w-5">{currentCardIcon}</span>
|
||||
<h2 className = "text-sm text-gray-800 font-semibold">{rowContent.username}</h2>
|
||||
<h2 style={{ fontSize: '20px' }} className = "text-sm text-gray-800 font-semibold">{rowContent.username}</h2>
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={toggleFavorite} className="py-2 text-gray-500 hover:text-gray-800 mr-2">
|
||||
|
|
@ -144,40 +97,54 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
|
|||
</div>
|
||||
<div className="p-4">
|
||||
<table className="p-4">
|
||||
<tbody style={{fontWeight: 'normal'}}>
|
||||
<tr>
|
||||
<td style={{paddingRight: '5px'}}><UserIcon className="h-5 w-5" /></td>
|
||||
<td style={{fontSize:17, paddingRight: '30px'}}>Username</td>
|
||||
<td style={{fontSize:17}}>
|
||||
<tbody>
|
||||
<tr className="w-full text-sm items-center flex flex-row justify-between">
|
||||
<div className="flex flex-row space-x-2 text-gray-500">
|
||||
<td><UserIcon className="h-4 w-4" /></td>
|
||||
<td className="w-20">Username</td>
|
||||
</div>
|
||||
<td className="w-3/4">
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
value={tempRowContent.username}
|
||||
onChange={handleTempRowContentChange}
|
||||
onKeyDown={handleEnterPress}
|
||||
type="text"
|
||||
name="username"
|
||||
value={tempRowContent.username}
|
||||
onChange={handleTempRowContentChange}
|
||||
onKeyDown={handleEnterPress}
|
||||
className="w-full p-1 focus:outline-gray-200 hover:bg-gray-50"
|
||||
/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{paddingRight: '5px'}}><ListBulletIcon className="h-5 w-5" /></td>
|
||||
<td style={{fontSize:17, paddingRight: '30px'}}>Role</td>
|
||||
<td style={{fontSize:17}}>{rowContent.role}</td>
|
||||
<tr className="w-full text-sm items-center flex flex-row justify-between">
|
||||
<div className="flex flex-row space-x-2 text-gray-500">
|
||||
<td><ListBulletIcon className="h-4 w-4" /></td>
|
||||
<td className="w-20">Role</td>
|
||||
</div>
|
||||
<td className="w-3/4">
|
||||
{rowContent.role}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{paddingRight: '5px'}}><EnvelopeIcon className="h-5 w-5" /></td>
|
||||
<td style={{fontSize:17, paddingRight: '30px'}}>Email</td>
|
||||
<td style={{fontSize:17}}>
|
||||
<tr className="w-full text-sm items-center flex flex-row justify-between">
|
||||
<div className="flex flex-row space-x-2 text-gray-500">
|
||||
<td><EnvelopeIcon className="h-4 w-4" /></td>
|
||||
<td className="w-20">Email</td>
|
||||
</div>
|
||||
<td className="w-3/4">
|
||||
<input
|
||||
type="text"
|
||||
name="email"
|
||||
value={tempRowContent.email}
|
||||
onChange={handleTempRowContentChange}
|
||||
onKeyDown={handleEnterPress}
|
||||
className="w-full p-1 focus:outline-gray-200 hover:bg-gray-50"
|
||||
/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{paddingRight: '5px'}}><ListBulletIcon className="h-5 w-5" /></td>
|
||||
<td style={{fontSize:17, paddingRight: '70px'}}>Type of Program</td>
|
||||
<td style={{fontSize:17}}>{rowContent.program}</td>
|
||||
<tr className="w-full text-sm items-center flex flex-row justify-between">
|
||||
<div className="flex flex-row space-x-2 text-gray-500">
|
||||
<td><ListBulletIcon className="h-4 w-4" /></td>
|
||||
<td className="w-20">Type of Program</td>
|
||||
</div>
|
||||
<td className="w-3/4">
|
||||
{rowContent.program}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user