Adding api call function to add-customer
This commit is contained in:
parent
f7871882a1
commit
f4ef45167b
55
db.json
55
db.json
@ -1,18 +1,18 @@
|
||||
{
|
||||
"authlogin": [
|
||||
{
|
||||
"id": 1,
|
||||
"email": "admin@gmail.com",
|
||||
"password": "123",
|
||||
"role": "admin"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"email": "employee@gmail.com",
|
||||
"password": "123",
|
||||
"role": "employee"
|
||||
}
|
||||
],
|
||||
{
|
||||
"id": 1,
|
||||
"email": "admin@gmail.com",
|
||||
"password": "123",
|
||||
"role": "admin"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"email": "employee@gmail.com",
|
||||
"password": "123",
|
||||
"role": "employee"
|
||||
}
|
||||
],
|
||||
"health-check": {
|
||||
"status": "OK"
|
||||
},
|
||||
@ -66,6 +66,33 @@
|
||||
"name": "Customer 2",
|
||||
"email": "customer2@example.com",
|
||||
"phone": "0987654321"
|
||||
},
|
||||
{
|
||||
"name": "Suraj Birewar",
|
||||
"age": "24",
|
||||
"gender": "Male",
|
||||
"email": "surajbirewar001@gmail.com",
|
||||
"address": "Bavdhan, Pune",
|
||||
"mobile": "07559393995",
|
||||
"id": 3
|
||||
},
|
||||
{
|
||||
"name": "rahul",
|
||||
"age": "21",
|
||||
"gender": "male",
|
||||
"email": "rahul001@gmail.com",
|
||||
"address": "Bavdhan, Pune",
|
||||
"mobile": "7559393995",
|
||||
"id": 4
|
||||
},
|
||||
{
|
||||
"name": "atharv",
|
||||
"age": "19",
|
||||
"gender": "male",
|
||||
"email": "atharv@gmail.com",
|
||||
"address": "baner pune ",
|
||||
"mobile": "784365873",
|
||||
"id": 5
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
37
src/components/categories/CategoryList.jsx
Normal file
37
src/components/categories/CategoryList.jsx
Normal file
@ -0,0 +1,37 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import axiosInstance from '../../api/axiosConfig';
|
||||
import Sidebar from '../sidebar/Sidebar';
|
||||
|
||||
const CategoryList = () => {
|
||||
const [categories, setCategories] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
axios.get('http://localhost:3001/categories')
|
||||
.then(response => {
|
||||
setCategories(response.data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching categories:', error);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white p-10">
|
||||
<h1 className="text-4xl font-bold mb-8">Categories</h1>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-6">
|
||||
{categories.map(category => (
|
||||
<Link key={category.id} to={`/products/${category.name}`}>
|
||||
<div className="bg-gray-800 rounded-lg p-6 flex flex-col items-center hover:bg-gray-700 transition">
|
||||
<img src={`/images/${category.name}.png`} alt={category.name} className="w-32 h-32 mb-4" />
|
||||
<h2 className="text-2xl font-semibold">{category.name}</h2>
|
||||
<p className="text-gray-400">click to view products</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategoryList;
|
||||
34
src/components/categories/ProductList.jsx
Normal file
34
src/components/categories/ProductList.jsx
Normal file
@ -0,0 +1,34 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
|
||||
const ProductList = () => {
|
||||
const { category } = useParams();
|
||||
const [products, setProducts] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
axios.get(`http://localhost:3001/products?category=${category}`)
|
||||
.then(response => {
|
||||
setProducts(response.data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching products:', error);
|
||||
});
|
||||
}, [category]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white p-10">
|
||||
<h1 className="text-4xl font-bold mb-8">Products in {category}</h1>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{products.map(product => (
|
||||
<div key={product.id} className="bg-gray-800 rounded-lg p-6 flex flex-col items-center">
|
||||
<h2 className="text-2xl font-semibold mb-4">{product.name}</h2>
|
||||
<p className="text-gray-400">Price: ${product.price}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductList;
|
||||
@ -1,36 +1,36 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import axiosInstance from '../../api/axiosConfig';
|
||||
|
||||
import Sidebar from '../sidebar/Sidebar';
|
||||
import axiosInstance from '../../api/axiosConfig';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
|
||||
const AddCustomer = () => {
|
||||
const navigate = useNavigate();
|
||||
const [customerData, setCustomerData] = useState({
|
||||
name: '',
|
||||
age: '',
|
||||
gender: '',
|
||||
email: '',
|
||||
address: '',
|
||||
mobileNo: ''
|
||||
mobile: '',
|
||||
});
|
||||
|
||||
const handleChange = (e) => {
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setCustomerData({
|
||||
...customerData,
|
||||
[name]: value
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
const handleAddCustomerSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const response = await axiosInstance.post('/api/customers', customerData);
|
||||
console.log('Customer data saved:', response.data);
|
||||
|
||||
const response = await axiosInstance.post('http://localhost:5000/customers', customerData);
|
||||
navigate('/customers');
|
||||
} catch (error) {
|
||||
console.error('Error saving customer data:', error);
|
||||
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
@ -41,10 +41,9 @@ const AddCustomer = () => {
|
||||
<div className="min-h-screen text-gray-300 p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-semibold text-orange-500">Add Customer</h1>
|
||||
<Link to="/" className="text-orange-500">skip for now</Link>
|
||||
<Link to="/" className="text-orange-500">Skip for now</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
<div className="text-center">
|
||||
<div className="inline-block relative">
|
||||
@ -63,78 +62,75 @@ const AddCustomer = () => {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{/* Form */}
|
||||
<div className="md:col-span-2 space-y-4">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<form onSubmit={handleAddCustomerSubmit}>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-black-700">Customer Name :</label>
|
||||
<label className="block text-sm font-medium text-black-700">Customer Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={customerData.name}
|
||||
onChange={handleChange}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-black-700">Age :</label>
|
||||
<label className="block text-sm font-medium text-black-700">Age:</label>
|
||||
<input
|
||||
type="number"
|
||||
name="age"
|
||||
value={customerData.age}
|
||||
onChange={handleChange}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-black-700">Gender :</label>
|
||||
<input
|
||||
type="text"
|
||||
<label className="block text-sm font-medium text-black-700">Gender:</label>
|
||||
<select
|
||||
name="gender"
|
||||
value={customerData.gender}
|
||||
onChange={handleChange}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline"
|
||||
required
|
||||
/>
|
||||
>
|
||||
<option value="" disabled>Select gender</option>
|
||||
<option value="male">Male</option>
|
||||
<option value="female">Female</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-black-700">Email :</label>
|
||||
<label className="block text-sm font-medium text-black-700">Email:</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={customerData.email}
|
||||
onChange={handleChange}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-black-700">Address :</label>
|
||||
<label className="block text-sm font-medium text-black-700">Address:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
value={customerData.address}
|
||||
onChange={handleChange}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-black-700">Mobile No :</label>
|
||||
<label className="block text-sm font-medium text-black-700">Mobile No:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="mobileNo"
|
||||
value={customerData.mobileNo}
|
||||
onChange={handleChange}
|
||||
name="mobile"
|
||||
value={customerData.mobile}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline"
|
||||
required
|
||||
/>
|
||||
</div> <br/>
|
||||
</div>
|
||||
<br />
|
||||
<div className="text-center">
|
||||
<button type="submit" className="bg-orange-500 text-black px-4 py-2 rounded-md font-semibold text-sm">
|
||||
|
||||
Save Information
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,19 +1,27 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Sidebar from '../sidebar/Sidebar';
|
||||
|
||||
import axiosInstance from '../../api/axiosConfig';
|
||||
const CustomerList = () => {
|
||||
const [customers, setCustomers] = useState([]);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
// Fetch the customers data from the JSON file
|
||||
fetch('/customers.json')
|
||||
.then((response) => response.json())
|
||||
.then((data) => setCustomers(data))
|
||||
.catch((error) => console.error('Error fetching customers:', error));
|
||||
getCustomers()
|
||||
}, []);
|
||||
|
||||
const getCustomers = async () => {
|
||||
try {
|
||||
const response = await axiosInstance.get('http://localhost:5000/customers');
|
||||
let customers_data = response.data; // List of customers
|
||||
setCustomers(customers_data)
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleAddCustomer = () => {
|
||||
navigate('/add-customer');
|
||||
};
|
||||
|
||||
@ -28,7 +28,7 @@ const CustomerMeasurements = () => {
|
||||
<div className="min-h-screen text-gray-300 p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-semibold text-orange-500">Customer Measurements</h1>
|
||||
<Link to="/" className="text-orange-500">skip for now</Link>
|
||||
<Link to="/CategoryList" className="text-orange-500">skip for now</Link>
|
||||
</div>
|
||||
<Form onFinish={onFinish} className="space-y-4">
|
||||
<h2 className="text-lg font-semibold text-gray-400">Upper Body Measurements</h2>
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Layout, Button } from 'antd';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './Sidebar.css';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const { Sider } = Layout;
|
||||
|
||||
|
||||
import HomeIcon from '../../assets/thob-data/HomeIcon.svg';
|
||||
// Import your SVG icons
|
||||
import HomeIcon from '../../assets/thob-data/HomeIcon.svg';
|
||||
import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg';
|
||||
import OrdersIcon from '../../assets/thob-data/OrdersIcon.svg';
|
||||
import CategoriesIcon from '../../assets/thob-data/CategoriesIcon.svg';
|
||||
@ -16,41 +12,49 @@ import MeasurmentsIcon from '../../assets/thob-data/MeasurmentsIcon.svg';
|
||||
import ProfileIcon from '../../assets/thob-data/ProfileIcon.svg';
|
||||
import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg';
|
||||
|
||||
const AdminSidebar = () => {
|
||||
const Sidebar = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleNavigation = (link) => {
|
||||
navigate(link);
|
||||
};
|
||||
|
||||
return (
|
||||
<Sider width={60} className="sidebar">
|
||||
<div className="logo">t.</div>
|
||||
<div className="menu">
|
||||
<Link to="/admin-dashboard">
|
||||
<Button type="link" icon={<HomeIcon />} className="menu-item" />
|
||||
</Link>
|
||||
<Link to="/admin/manage-customers">
|
||||
<Button type="link" icon={<AddCustomerIcon />} className="menu-item" />
|
||||
</Link>
|
||||
<Link to="/admin/orders">
|
||||
<Button type="link" icon={<OrdersIcon />} className="menu-item" />
|
||||
</Link>
|
||||
<Link to="/admin/categories">
|
||||
<Button type="link" icon={<CategoriesIcon />} className="menu-item" />
|
||||
</Link>
|
||||
<Link to="/admin/catalog">
|
||||
<Button type="link" icon={<CatalogIcon />} className="menu-item" />
|
||||
</Link>
|
||||
<Link to="/admin/employees">
|
||||
<Button type="link" icon={<EmployeeIcon />} className="menu-item" />
|
||||
</Link>
|
||||
<Link to="/admin/measurements">
|
||||
<Button type="link" icon={<MeasurmentsIcon />} className="menu-item" />
|
||||
</Link>
|
||||
<Link to="/admin/profile">
|
||||
<Button type="link" icon={<ProfileIcon />} className="menu-item" />
|
||||
</Link>
|
||||
<Link to="/admin/logout">
|
||||
<Button type="link" icon={<LogoutIcon />} className="menu-item" />
|
||||
</Link>
|
||||
<div className="flex">
|
||||
<div className="w-16 min-h-screen bg-black flex flex-col items-center py-4">
|
||||
<div className="text-orange-500 text-4xl mb-10">t.</div>
|
||||
<nav className="flex flex-col items-center space-y-4">
|
||||
<div onClick={() => handleNavigation('/admin-dashboard')} className="cursor-pointer">
|
||||
<img src={HomeIcon} alt="Home" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation('/admin/manage-customers')} className="cursor-pointer">
|
||||
<img src={AddCustomerIcon} alt="Add Customer" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation('/admin/orders')} className="cursor-pointer">
|
||||
<img src={OrdersIcon} alt="Orders" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation('/admin/categories')} className="cursor-pointer">
|
||||
<img src={CategoriesIcon} alt="Categories" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation('/admin/catalog')} className="cursor-pointer">
|
||||
<img src={CatalogIcon} alt="Catalog" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation('/admin/employee')} className="cursor-pointer">
|
||||
<img src={EmployeeIcon} alt="employee" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation('/admin/measurements')} className="cursor-pointer">
|
||||
<img src={MeasurmentsIcon} alt="measurements" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation('/admin/profile')} className="cursor-pointer">
|
||||
<img src={ProfileIcon} alt="Profile" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation('/admin/logout')} className="cursor-pointer mt-auto mb-4">
|
||||
<img src={LogoutIcon} alt="Logout" className="w-8 h-8" />
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</Sider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminSidebar;
|
||||
export default Sidebar;
|
||||
|
||||
@ -12,7 +12,6 @@ import CategoriesIcon from '../../assets/thob-data/CategoriesIcon.svg';
|
||||
import ProfileIcon from '../../assets/thob-data/ProfileIcon.svg';
|
||||
import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg';
|
||||
|
||||
|
||||
const { Sider } = Layout;
|
||||
|
||||
const EmployeeSidebar = () => {
|
||||
@ -28,46 +27,12 @@ const EmployeeSidebar = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
className="menu-button"
|
||||
type="primary"
|
||||
onClick={showDrawer}
|
||||
icon={visible ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
/>
|
||||
<Drawer
|
||||
title="Menu"
|
||||
placement="left"
|
||||
onClose={closeDrawer}
|
||||
visible={visible}
|
||||
bodyStyle={{ padding: 0 }}
|
||||
width={200}
|
||||
>
|
||||
<div className="drawer-menu">
|
||||
<Link to="/employee-dashboard" className="drawer-link">
|
||||
<img src={HomeIcon} alt="Home" className="drawer-icon" />
|
||||
</Link>
|
||||
<Link to="/employee/categories" className="drawer-link">
|
||||
<img src={CategoriesIcon} alt="Categories" className="drawer-icon" />
|
||||
</Link>
|
||||
<Link to="/employee/manage-customers" className="drawer-link">
|
||||
<img src={AddCustomerIcon} alt="Add Customer" className="drawer-icon" />
|
||||
</Link>
|
||||
<Link to="/employee/orders" className="drawer-link">
|
||||
<img src={OrdersIcon} alt="Orders" className="drawer-icon" />
|
||||
</Link>
|
||||
<Link to="/employee/profile" className="drawer-link">
|
||||
<img src={ProfileIcon} alt="Profile" className="drawer-icon" />
|
||||
</Link>
|
||||
<Link to="/employee/logout" className="drawer-link">
|
||||
<img src={LogoutIcon} alt="Logout" className="drawer-icon" />
|
||||
</Link>
|
||||
</div>
|
||||
</Drawer>
|
||||
|
||||
<Sider
|
||||
className="desktop-sidebar"
|
||||
breakpoint="lg"
|
||||
collapsedWidth="0"
|
||||
width={200}
|
||||
width={80}
|
||||
style={{ height: '100vh' }}
|
||||
>
|
||||
<div className="flex items-center justify-center h-16 w-16 m-5 bg-white" style={{ width: '40px', height: '40px', marginTop: '16px', marginLeft: '20px' }}>
|
||||
@ -99,3 +64,7 @@ const EmployeeSidebar = () => {
|
||||
};
|
||||
|
||||
export default EmployeeSidebar;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -2,51 +2,13 @@ import React, { useContext } from 'react';
|
||||
import AdminSidebar from './AdminSidebar';
|
||||
import EmployeeSidebar from './EmployeeSidebar';
|
||||
import { AuthContext } from '../../contexts/AuthContext';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
// Import your SVG icons
|
||||
import HomeIcon from '../../assets/thob-data/HomeIcon.svg';
|
||||
import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg';
|
||||
import OrdersIcon from '../../assets/thob-data/OrdersIcon.svg';
|
||||
import CategoriesIcon from '../../assets/thob-data/CategoriesIcon.svg';
|
||||
import ProfileIcon from '../../assets/thob-data/ProfileIcon.svg';
|
||||
import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg';
|
||||
|
||||
const handleNavigation = async (e, link) => {
|
||||
e.preventDefault();
|
||||
window.location = link
|
||||
};
|
||||
const Sidebar = () => {
|
||||
//const { user } = useContext(AuthContext);
|
||||
//if (!user) return null;
|
||||
// return user.role === 'admin' ? <AdminSidebar /> : <EmployeeSidebar />;
|
||||
return (
|
||||
<div className="flex">
|
||||
<div className=" w-16 min-h-screen flex flex-col items-center">
|
||||
<div className="text-white text-4xl mt-4">t.</div>
|
||||
<nav className="mt-10">
|
||||
<div onClick={() => handleNavigation("/admin-dashboard")} className="block mb-4">
|
||||
<img src={HomeIcon} alt="Home" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation("/admin/categories")} className="block mb-4">
|
||||
<img src={CategoriesIcon} alt="Categories" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation("/admin/manage-customers")} className="block mb-4">
|
||||
<img src={AddCustomerIcon} alt="Add Customer" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation("/admin/orders")} className="block mb-4">
|
||||
<img src={OrdersIcon} alt="Orders" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation("/admin/profile")} className="block mb-4">
|
||||
<img src={ProfileIcon} alt="Profile" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation("/admin/logout")} className="block mb-4">
|
||||
<img src={LogoutIcon} alt="Logout" className="w-8 h-8" />
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const { user } = useContext(AuthContext);
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return user.role === 'admin' ? <AdminSidebar /> : <EmployeeSidebar />;
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
|
||||
@ -64,3 +64,10 @@ button:focus-visible {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
.input-underline {
|
||||
@apply w-full border-b-2 border-gray-300 focus:border-orange-500 outline-none;
|
||||
max-width: 300px; /* Set a fixed max-width for uniformity */
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user