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 = () => {

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: