The AI platform for the future

Generate an image of a futuristic space station

Here's your futuristic space station:

Write a React component for a space-themed todo list

Here's a space-themed React component for a todo list:

import { useState } from 'react';
import { Star, Trash2, CheckCircle, Circle } from 'lucide-react';

function SpaceTodoList() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, { text: input, completed: false }]);
      setInput('');
    }
  };

  const toggleTodo = (index) => {
    const newTodos = [...todos];
    newTodos[index].completed = !newTodos[index].completed;
    setTodos(newTodos);
  };

  const deleteTodo = (index) => {
    const newTodos = todos.filter((_, i) => i !== index);
    setTodos(newTodos);
  };

  return (
    <div className="max-w-md mx-auto p-6 bg-black/50 backdrop-blur-sm border border-purple-500/20 rounded-xl">
      <div className="flex items-center gap-2 mb-6">
        <Star className="h-5 w-5 text-purple-400" />
        <h1 className="text-2xl font-bold text-white">Cronix Tasks</h1>
      </div>
      <div className="flex mb-4">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          className="flex-1 px-4 py-2 bg-white/5 border border-white/10 rounded-l-md text-white"
          placeholder="Add a new mission"
        />
        <button
          onClick={addTodo}
          className="px-4 py-2 bg-gradient-to-r from-purple-600 to-cyan-500 text-white rounded-r-md"
        >
          Add
        </button>
      </div>
      <ul className="space-y-2">
        {todos.map((todo, index) => (
          <li
            key={index}
            className="flex items-center p-3 bg-white/5 border border-white/10 rounded-md group"
          >
            <button
              onClick={() => toggleTodo(index)}
              className="mr-3 text-purple-400"
            >
              {todo.completed ? <CheckCircle className="h-5 w-5" /> : <Circle className="h-5 w-5" />}
            </button>
            <span
              className={`flex-1 ${
                todo.completed ? 'line-through text-white/50' : 'text-white'
              }`}
            >
              {todo.text}
            </span>
            <button
              onClick={() => deleteTodo(index)}
              className="text-white/30 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <Trash2 className="h-4 w-4" />
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default SpaceTodoList;