All components with a small piece of CSS in One file
import React, { useState, useRef, useContext, createContext, useEffect } from 'react';
// Global CSS styles
const styles = {
app: {
fontFamily: 'Arial, sans-serif',
maxWidth: '800px',
margin: '0 auto',
padding: '20px',
backgroundColor: 'var(--bg-color)',
color: 'var(--text-color)',
minHeight: '100vh',
transition: 'all 0.3s ease'
},
component: {
backgroundColor: 'var(--card-bg)',
padding: '20px',
margin: '20px 0',
borderRadius: '8px',
border: '1px solid var(--border-color)',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
},
input: {
padding: '10px',
margin: '5px',
border: '1px solid var(--border-color)',
borderRadius: '4px',
fontSize: '14px',
backgroundColor: 'var(--input-bg)',
color: 'var(--text-color)'
},
button: {
padding: '10px 15px',
margin: '5px',
border: 'none',
borderRadius: '4px',
backgroundColor: '#007bff',
color: 'white',
cursor: 'pointer',
fontSize: '14px'
},
buttonDanger: {
backgroundColor: '#dc3545'
},
buttonSuccess: {
backgroundColor: '#28a745'
},
list: {
listStyle: 'none',
padding: '0'
},
listItem: {
padding: '10px',
margin: '5px 0',
backgroundColor: 'var(--item-bg)',
borderRadius: '4px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
},
title: {
borderBottom: '2px solid #007bff',
paddingBottom: '10px',
marginBottom: '20px'
},
form: {
display: 'flex',
flexDirection: 'column',
gap: '10px'
},
textarea: {
padding: '10px',
border: '1px solid var(--border-color)',
borderRadius: '4px',
resize: 'vertical',
minHeight: '100px',
backgroundColor: 'var(--input-bg)',
color: 'var(--text-color)'
};
// Theme Context
const ThemeContext = createContext();
// 1. Add/Remove Items Component
const ItemList = () => {
const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState('');
const addItem = () => {
if (inputValue.trim()) {
setItems([...items, { id: Date.now(), text: inputValue }]);
setInputValue('');
};
const removeItem = (id) => {
setItems(items.filter(item => item.id !== id));
};
return (
<div style={styles.component}>
<h2 style={styles.title}>1. Add/Remove Items</h2>
<div>
<input
style={styles.input}
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="Enter item"
onKeyPress={(e) => e.key === 'Enter' && addItem()}
/>
<button style={styles.button} onClick={addItem}>Add Item</button>
</div>
<ul style={styles.list}>
{items.map(item => (
<li key={item.id} style={styles.listItem}>
{item.text}
<button
style={{...styles.button, ...styles.buttonDanger}}
onClick={() => removeItem(item.id)}
>
Remove
</button>
</li>
))}
</ul>
</div>
);
};
// 2. Focus Input Component
const FocusInput = () => {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div style={styles.component}>
<h2 style={styles.title}>2. Focus Input</h2>
<input
ref={inputRef}
style={styles.input}
type="text"
placeholder="Click button to focus me"
/>
<button style={styles.button} onClick={focusInput}>Focus Input</button>
</div>
);
};
// 3. Theme Toggle Component
const ThemeToggle = () => {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<div style={styles.component}>
<h2 style={styles.title}>3. Theme Toggle</h2>
<p>Current theme: {theme}</p>
<button style={styles.button} onClick={toggleTheme}>
Switch to {theme === 'light' ? 'Dark' : 'Light'} Theme
</button>
</div>
);
};
// 4. Previous Value Tracker
const PreviousValue = () => {
const [value, setValue] = useState('');
const prevValueRef = useRef('');
useEffect(() => {
prevValueRef.current = value;
});
return (
<div style={styles.component}>
<h2 style={styles.title}>4. Current & Previous Value</h2>
<input
style={styles.input}
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Type something"
/>
<p>Current: {value}</p>
<p>Previous: {prevValueRef.current}</p>
</div>
);
};
// 5. Contact Us Component
const ContactUs = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
const [submitted, setSubmitted] = useState(false);
const handleSubmit = () => {
if (formData.name && formData.email && formData.message) {
// Simulate sending email
console.log('Email sent:', formData);
alert(`Email sent successfully!\nFrom: ${formData.name}\nEmail: ${formData.email}`);
setSubmitted(true);
setTimeout(() => {
setSubmitted(false);
setFormData({ name: '', email: '', message: '' });
}, 2000);
} else {
alert('Please fill in all fields');
}
};
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
return (
<div style={styles.component}>
<h2 style={styles.title}>5. Contact Us</h2>
{submitted ? (
<p style={{color: '#28a745'}}>Thank you! Your message has been sent.</p>
):(
<div style={styles.form}>
<input
style={styles.input}
type="text"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Your Name"
/>
<input
style={styles.input}
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Your Email"
/>
<textarea
style={styles.textarea}
name="message"
value={formData.message}
onChange={handleChange}
placeholder="Your Message"
/>
<button style={{...styles.button, ...styles.buttonSuccess}} onClick={handleSubmit}>
Send Message
</button>
</div>
)}
</div>
);
};
// 6. Login Component
const Login = () => {
const [credentials, setCredentials] = useState({ username: '', password: '' });
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [user, setUser] = useState(null);
// Predefined users
const users = [
{ username: 'admin', password: 'admin123' },
{ username: 'user', password: 'user123' },
{ username: 'demo', password: 'demo123' }
];
const handleLogin = () => {
const foundUser = users.find(
u => u.username === credentials.username && u.password === credentials.password
);
if (foundUser) {
setIsLoggedIn(true);
setUser(foundUser);
// Note: localStorage is not available in Claude artifacts
// In a real app, you would use: localStorage.setItem('user', JSON.stringify(foundUser));
} else {
alert('Invalid credentials!');
};
const handleLogout = () => {
setIsLoggedIn(false);
setUser(null);
setCredentials({ username: '', password: '' });
// Note: localStorage is not available in Claude artifacts
// In a real app, you would use: localStorage.removeItem('user');
};
// Check for existing session - disabled in Claude artifacts
useEffect(() => {
// const savedUser = localStorage.getItem('user');
// if (savedUser) {
// setUser(JSON.parse(savedUser));
// setIsLoggedIn(true);
// }
}, []);
if (isLoggedIn) {
return (
<div style={styles.component}>
<h2 style={styles.title}>6. Login System</h2>
<p>Welcome, {user.username}!</p>
<p style={{color: '#28a745'}}>You are successfully logged in.</p>
<button style={styles.button} onClick={handleLogout}>Logout</button>
</div>
);
return (
<div style={styles.component}>
<h2 style={styles.title}>6. Login System</h2>
<form style={styles.form} onSubmit={handleLogin}>
<input
style={styles.input}
type="text"
placeholder="Username"
value={credentials.username}
onChange={(e) => setCredentials({...credentials, username: e.target.value})}
required
/>
<input
style={styles.input}
type="password"
placeholder="Password"
value={credentials.password}
onChange={(e) => setCredentials({...credentials, password: e.target.value})}
required
/>
<button style={{...styles.button, ...styles.buttonSuccess}} type="submit">
Login
</button>
</form>
<div style={{marginTop: '10px', fontSize: '12px', color: '#666'}}>
<p>Demo accounts:</p>
<p>admin/admin123 | user/user123 | demo/demo123</p>
</div>
</div>
);
};
// Theme Provider Component
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme(theme === 'light' ? 'dark' : 'light');
};
// CSS variables for theming
const themeVars = theme === 'light' ? {
'--bg-color': '#ffffff',
'--text-color': '#333333',
'--card-bg': '#f8f9fa',
'--border-color': '#dee2e6',
'--input-bg': '#ffffff',
'--item-bg': '#ffffff'
}:{
'--bg-color': '#1a1a1a',
'--text-color': '#ffffff',
'--card-bg': '#2d2d2d',
'--border-color': '#444444',
'--input-bg': '#333333',
'--item-bg': '#3d3d3d'
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
<div style={{ ...themeVars }}>
{children}
</div>
</ThemeContext.Provider>
);
};
// Main App Component
const App = () => {
return (
<ThemeProvider>
<div style={styles.app}>
<h1 style={{textAlign: 'center', color: '#007bff'}}>React Components Collection</h1>
<ItemList />
<FocusInput />
<ThemeToggle />
<PreviousValue />
<ContactUs />
<Login />
</div>
</ThemeProvider>
);
};
export default App;
Output:
