import { Editor } from "draft-js";
import { useEditorApi } from "../TextEditorFunctions/useEditorApi.ts";
import classes from "./TextEditor.module.scss";
import { useEffect, useRef } from "react";
const TextEditor = () => {
const editorApi = useEditorApi();
const ref = useRef<Editor | null>(null);
useEffect(() => {
if (ref.current) ref.current.focus(); // Установка фокуса при изменении контента
}, [editorApi]);
if (!editorApi) return null;
return (
<div
className={classes.textArea}
onDrop={(e) => {
e.preventDefault();
const url = e.dataTransfer.getData("URL");
if (url) editorApi?.addImage(url);
}}
onDragEnd={(e) => {
e.preventDefault();
}}
>
<Editor
ref={ref}
placeholder={"Описание поста"}
editorState={editorApi.state}
onChange={editorApi.onChange}
/>
</div>
);
};
export default TextEditor;import React from 'react';
import noPhoto from '../../images/noPhotoCard.png'
import styles from './CardProduct.module.css'
const CardProduct = () => {
return (
<div className={`w-full block hover:bg-white duration-300 px-3 py-2 h-[485px]`}>
<a href="src/components/CardProduct/CardProduct">
<div className={`relative`}>
<img className={`w-full`} src={noPhoto} alt=""/>
<div className={`rounded-2xl bg-yellow-400 inline-block px-4 py-1 absolute top-4 right-4 text-shadow-lg drop-shadow-lg`}>ХИТ</div>
</div>
<div className={`mt-2`}>
<div className={`texxt-xl`}>M19106 Водолазка д/дч фуксия</div>
<div className={`flex items-end text-xl`}>
<div className={`line-through text-ribbitos_gray`}>2 175</div>
<div className={`mx-4 font-bold`}>1 088</div>
<div>руб.</div>
</div>
</div>
</a>
<div className={`mt-3 bg-white`}>
<div className={`flex items-center`}>
<div className={`text-ribbitos_gray text-md`}>Размер</div>
<div className={`flex items-center`}>
<div className={`border border-ribbitos_gray px-2 mx-1 rounded-sm hover:border-ribbitos_brown cursor-pointer duration-300 text-sm`}>128</div>
<div className={`border border-ribbitos_gray px-2 mx-1 rounded-sm hover:border-ribbitos_brown cursor-pointer duration-300 text-sm`}>168</div>
<div className={`border border-ribbitos_gray px-2 mx-1 rounded-sm hover:border-ribbitos_brown cursor-pointer duration-300 text-sm`}>220</div>
</div>
</div>
<div className={`flex items-center mt-6 justify-center`}>
<button className={`text-md border border-ribbitos_brown rounded-md px-4 py-1 uppercase bg-ribbitos_brown text-white relative overflow-hidden hover:shadow-md hover:shadow-black duration-300 w-1/2 ${styles.cardButton}`}>
<div className={`opacity-0`}>В корзину</div>
<span className={`absolute top-1/2 text-center left-1/2 -translate-x-1/2 -translate-y-1/2 w-full duration-300 ${styles.basketText}`}>В корзину</span>
<span className={`absolute top-[150%] text-center left-1/2 -translate-x-1/2 -translate-y-1/2 duration-300 ${styles.basketIcon}`}>Купить</span>
</button>
<button className={`text-md border border-ribbitos_brown rounded-md px-4 py-1 uppercase ml-2 text-ribbitos_brown font-bold duration-300 hover:bg-ribbitos_brown hover:text-white hover:shadow-md hover:shadow-black w-1/2`}>В 1 клик</button>
</div>
</div>
</div>
);
};
export default CardProduct;.cardButton:hover > .basketText {
top: -150%;
}
.cardButton:hover > .basketIcon {
top: 50%;
}"dependencies": {
"@reduxjs/toolkit": "^1.9.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"@types/jest": "^27.0.1",
"@types/node": "^16.7.13",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"axios": "^1.1.3",
"node-sass": "^7.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.4.3",
"react-scripts": "5.0.1",
"sass": "^1.56.1",
"swiper": "^8.4.4",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
}