leumas-private-shared/src/Theme/SettingsPage.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useTheme } from './ThemeContext';

const SettingsPage = () => {
  const [colorPalettes, setColorPalettes] = useState([]);
  const [selectedPalette, setSelectedPalette] = useState(null);
  const { theme, setColorPalette } = useTheme();

  useEffect(() => {
    const fetchColorPalettes = async () => {
      try {
        const response = await axios.get(`${import.meta.env.VITE_REACT_APP_LEUMAS_API_ENDPOINT}/configs/color-palettes`);
        setColorPalettes(response.data);
      } catch (error) {
        console.error('Error fetching color palettes:', error);
      }
    };

    fetchColorPalettes();

    const savedPalette = localStorage.getItem('selectedPalette');
    if (savedPalette) {
      const palette = JSON.parse(savedPalette);
      setSelectedPalette(palette);
      setColorPalette(palette);
    }
  }, [setColorPalette]);

  const handlePaletteChange = (event) => {
    const paletteName = event.target.value;
    const palette = colorPalettes.find(p => p.name === paletteName);
    setSelectedPalette(palette);
    setColorPalette(palette);
  };

  return (
    <div className={`theme-transition theme-${theme} p-4`}>
      <h1 className="text-xl mb-4">Settings</h1>
      <div className="mb-4">
        <label className="block mb-2">Select Color Palette:</label>
        <select onChange={handlePaletteChange} className="p-2 rounded border">
          <option value="">Select a palette</option>
          {colorPalettes.map((palette) => (
            <option key={palette.name} value={palette.name}>
              {palette.name}
            </option>
          ))}
        </select>
      </div>
      {selectedPalette && (
        <div className="mt-4">
          <h2 className="text-lg mb-2">Selected Palette: {selectedPalette.name}</h2>
          <div className="flex">
            {selectedPalette.colors.map((color, index) => (
              <div
                key={index}
                style={{ backgroundColor: color.hex }}
                className="w-1/5 h-16"
              ></div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default SettingsPage;