ساختن یک برنامه لیست بسته بندی آماده تابستانی با React و TailwindCSS

npx create-vite my-app -- --template react

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        whip: '#fdf0d5',
        maroon: '#780000',
        lava: '#c1121f',
        navy: '#003049',
        cerulean: '#669bbc',
      },
      fontFamily: {
        body: ['"Karla"', 'sans-serif'],
        heading: ['"Caprasimo"', 'cursive'],
      },
    },
  },
  plugins: [],
};

@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Karla:wght@500;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

.list ul {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

@layer components {
  .pill {
    @apply bg-whip text-navy font-body px-8 py-3 text-lg font-bold border-none rounded-full cursor-pointer;
  }

  .pill-sm {
    @apply px-6 py-2 mx-2 text-sm font-bold uppercase;
  }
}

.app {
  grid-template-rows: auto auto 1fr auto;
}

import { useState } from 'react';
import Header from './components/Header';
import Form from './components/Form';
import PackingList from './components/PackingList';
import Stats from './components/Stats';

import './App.css';

function App() {
  const [items, setItems] = useState([]);
  const [description, setDescription] = useState('');
  const [quantity, setQuantity] = useState(1);

  function handleQuantityChange(e) {
    setQuantity(e.target.value);
  }

  function handleDescriptionChange(e) {
    setDescription(e.target.value);
  }

  function handleFormSubmit(e) {
    e.preventDefault();
    const newItem = {
      id: items.length + 1,
      inputOrder: items.length + 1,
      quantity: quantity,
      description: description,
      packed: false,
    };
    setItems([...items, newItem]);
    setQuantity(1);
    setDescription('');
  }

  // Handle packed state of each item
  function handlePackedChange(id) {
    // Create a new array with the same items, but with the packed state of the selected item toggled
    const newItems = items.map((item) => (item.id === id ? { ...item, packed: !item.packed } : item));
    setItems(newItems);
  }

  function handleRemoveItem(id) {
    const updatedItems = items.filter((item) => item.id !== id);
    setItems(updatedItems);
  }

  function calculatePackedItems() {
    return items.filter((item) => item.packed).length;
  }

  function calculatePercentagePacked() {
    return Math.round((calculatePackedItems() / items.length) * 100);
  }

  function handleSort(e) {
    const sortBy = e.target.value;
    setItems((currentItems) => {
      const sortedItems = [...currentItems];
      if (sortBy === 'input') {
        sortedItems.sort((a, b) => a.inputOrder - b.inputOrder);
        return sortedItems;
      } else if (sortBy === 'description') {
        sortedItems.sort((a, b) => {
          if (a.description.toLowerCase() < b.description.toLowerCase()) {
            return -1;
          } else if (a.description.toLowerCase() > b.description.toLowerCase()) {
            return 1;
          } else {
            return 0;
          }
        });
        return sortedItems;
      } else if (sortBy === 'packed') {
        sortedItems.sort((a, b) => {
          if (a.packed < b.packed) {
            return -1;
          } else if (a.packed > b.packed) {
            return 1;
          } else {
            return 0;
          }
        });
        return sortedItems;
      }
    });
  }

  function handleClearList() {
    setItems([]);
  }

  const numOfItems = items.length;
  const numOfPacked = calculatePackedItems();
  const percentPacked = numOfItems > 0 ? calculatePercentagePacked() : 0;

  return (
    <div className='app font-body text-navy grid w-full h-screen'>
      <Header />
      <Form
        onFormSubmit={handleFormSubmit}
        quantity={quantity}
        description={description}
        onDescriptionChange={handleDescriptionChange}
        onQuantityChange={handleQuantityChange}
      />
      <PackingList
        items={items}
        onPackedChange={handlePackedChange}
        onRemoveItem={handleRemoveItem}
        onClearList={handleClearList}
        onSort={handleSort}
      />
      <Stats numOfItems={numOfItems} numOfPacked={numOfPacked} percentPacked={percentPacked} />
    </div>
  );
}

export default App;

export default function Header() {
  return (
    <h1 className='font-heading bg-cerulean py-6 text-6xl tracking-tight text-center uppercase'>
      ✈️ AFK Packing List ⌨️
    </h1>
  );
}

export default function Form({ onFormSubmit, quantity, description, onQuantityChange, onDescriptionChange }) {
  return (
    <form className='bg-lava py-7 flex items-center justify-center gap-3' onSubmit={onFormSubmit}>
      <h3 className='mr-4 text-2xl'>what do you need for your trip?</h3>
      <select value={quantity} onChange={onQuantityChange} id='quantity' className='pill focus:outline-lava'>
        {[...Array(20)].map((_, i) => (
          <option key={i} value={i + 1}>
            {i + 1}
          </option>
        ))}
      </select>
      <input
        value={description}
        onChange={onDescriptionChange}
        id='description'
        className='pill focus:outline-lava'
        type='text'
        placeholder='Item...'
      />
      <button className='pill bg-cerulean focus:outline-navy uppercase' type='submit'>
        Add
      </button>
    </form>
  );
}

[...Array(20)].map((_, i) => (
  <option key={i} value={i + 1}>
    {i + 1}
  </option>
))

import Item from './Item';

export default function PackingList({ items, onPackedChange, onRemoveItem, onClearList, onSort }) {
  return (
    <section className='bg-navy text-whip list flex flex-col items-center justify-between gap-8 py-10'>
      <ul className='grid content-start justify-center w-4/5 gap-3 overflow-scroll list-none'>
        {items.map((item) => {
          return (
            <Item
              key={item.id}
              id={item.id}
              description={item.description}
              quantity={item.quantity}
              packed={item.packed}
              onPackedChange={onPackedChange}
              onRemoveItem={onRemoveItem}
            />
          );
        })}
      </ul>
      <div>
        <select onChange={onSort} className='pill pill-sm'>
          <option value='input'>Sort by input order</option>
          <option value='description'>Sort by description</option>
          <option value='packed'>Sort by packed status</option>
        </select>
        <button onClick={onClearList} className='pill pill-sm'>
          Clear List
        </button>
      </div>
    </section>
  );
}

export default function Item({ id, description, quantity, packed, onPackedChange, onRemoveItem }) {
  return (
    <>
      <li className='flex items-center gap-3'>
        <input
          className='accent-cerulean w-5 h-5'
          type='checkbox'
          checked={packed}
          onChange={() => onPackedChange(id)}
        />
        <span style={packed ? { textDecoration: 'line-through' } : {}}>
          {quantity} {description}
        </span>
        <button
          className='bg-none p-2 text-lg translate-y-0.5 border-none cursor-pointer'
          onClick={() => onRemoveItem(id)}
        >
          ❌
        </button>
      </li>
    </>
  );
}

export default function Stats({ numOfItems = 0, numOfPacked = 0, percentPacked = 0 }) {
  return (
    <footer className='bg-maroon text-whip py-8 text-lg font-bold text-center'>
      <p>
        You have {numOfItems} items on your list and you&apos;ve already packed {numOfPacked} ({percentPacked}%)
      </p>
    </footer>
  );
}