smisyuk4

// stote.tsx
import { combineReducers, configureStore } from '@reduxjs/toolkit';
import {
	FLUSH,
	PAUSE,
	PERSIST,
	PURGE,
	REGISTER,
	REHYDRATE,
	persistReducer,

smisyuk4

export interface Photo {
	id: string;
	photo: string;
	alt: string;
}

const DATA: Photo[] = [
	{
		id: '1',
		photo: '/images/Rectangle_15_329_351.webp',

smisyuk4

1. Структура директорій (модульна)

/src
  /store
    store.ts
  /services
    usersApi.ts
    postsApi.ts
    commentsApi.ts
    messagesApi.ts

smisyuk4

import { createApi, fakeBaseQuery } from '@reduxjs/toolkit/query/react';
import { db } from '../firebase/firebase.config';
import {
  collection,
  query,
  where,
  collectionGroup,
  updateDoc,
  deleteDoc,
  getDocs,

smisyuk4

import { useState } from 'react';
import { Icon } from '../Icon';
import { DivStyled, IconWrp, GasketStyled } from './RatingBar.styled';

export const RatingBar = () => {
  const [rate, setRate] = useState(0);

  return (
    <>
      <label>

smisyuk4

========================> 1 file:

import { useState } from "react";
import PropTypes from "prop-types";
import { Button } from "./Button.styled";

export default function ButtonStyled({ text }) {
  const [animationClass, setAnimationClass] = useState("");

  const handleClick = ({nativeEvent}) => {

smisyuk4

У input (всі типи) і textArea деякі браузери роблять заокруглення кутів, 
щоб це заблокувати - потрібно додати властивості до стилів:

  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;

smisyuk4

1. До секції додати id='назва'

2. У панелі навігації використати 
  <a href='#назва' aria-label='перехід на секцію'>
    секція
  </a>
  
3. Не можна для цього випадку використовувати 'react-router-dom'

smisyuk4

1. Додати файли у проект, у папку /assets/icons

2. У файлі index.css додати загальний курсор
body {
  cursor: url('./assets/icons/cursor.png'), auto;
}

3. У місце де потрібно ховер курсор
import cursorIcon from '../../assets/icons/click-cursor.png';

smisyuk4

export const UlStyled = styled.ul`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  grid-template-rows: repeat(2, minmax(200px, 1fr));
  grid-auto-flow: column;
  grid-gap: 16px;
  overflow-x: auto;
  
  grid-row-gap: 40px;
  grid-column-gap: 60px;