Create React Buttons/Tabs with Framer Motion and Tailwind for Gallery

Создай на React, Framer Motion, Tailwind кнопки или табы при клике на которые будет подгружаться новый вид галереи проектов слайды на странице будут размещаться и анимироваться по другому

Конечно! Давайте создадим простой пример на React с использованием Framer Motion и Tailwind CSS, где у нас будут кнопки для переключения между различными видами галереи проектов. Мы будем использовать Framer Motion для анимации и Tailwind CSS для стилизации.

1. Установите необходимые зависимости:

npm install react framer-motion tailwindcss

2. Настройте Tailwind CSS, создав файл tailwind.config.js:

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

3. Создайте файл src/index.css и добавьте туда:

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

4. Создайте основной компонен�� приложения App.js:

import React, { useState } from 'react';
import { motion } from 'framer-motion';
import './index.css';

const galleryVariants = {
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
    gap: '1rem',
  },
  list: {
    display: 'flex',
    flexDirection: 'column',
    gap: '1rem',
  },
};

const projects = [
  { id: 1, title: 'Project 1', description: 'Description 1' },
  { id: 2, title: 'Project 2', description: 'Description 2' },
  { id: 3, title: 'Project 3', description: 'Description 3' },
  { id: 4, title: 'Project 4', description: 'Description 4' },
];

const App = () => {
  const [view, setView] = useState('grid');

  return (
    <div className="p-4">
      <div className="flex space-x-4 mb-4">
        <button
          className="px-4 py-2 bg-blue-500 text-white rounded"
          onClick={() => setView('grid')}
        >
          Grid View
        </button>
        <button
          className="px-4 py-2 bg-green-500 text-white rounded"
          onClick={() => setView('list')}
        >
          List View
        </button>
      </div>
      <motion.div
        className="gallery"
        initial={false}
        animate={view}
        variants={galleryVariants}
      >
        {projects.map((project) => (
          <motion.div
            key={project.id}
            className="p-4 bg-gray-200 rounded"
            whileHover={{ scale: 1.05 }}
          >
            <h3 className="text-lg font-bold">{project.title}</h3>
            <p>{project.description}</p>
          </motion.div>
        ))}
      </motion.div>
    </div>
  );
};

export default App;

5. В src/index.js импортируйте стили и рендерите компонент App:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Теперь у вас есть простое приложение на React с использованием Framer Motion и Tailwind CSS, где можно переключаться между