diff --git a/package.json b/package.json index 480dd3c..dd17a5f 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,6 @@ "eslint-plugin-react-refresh": "^0.4.7", "postcss": "^8.4.38", "prettier": "^3.3.2", - "tailwind-scrollbar": "^3.1.0", "tailwindcss": "^3.4.4", "typescript": "^5.2.2", "vite": "^5.3.1" diff --git a/src/components/Layouts/Header.tsx b/src/components/Layouts/Header.tsx index fefc7e6..58edefa 100644 --- a/src/components/Layouts/Header.tsx +++ b/src/components/Layouts/Header.tsx @@ -101,7 +101,7 @@ function BurgerAnchor({ return ( {children} @@ -115,7 +115,7 @@ function ChooseLang({ currentLang }: { currentLang: 'RU' | 'EN' }) { diff --git a/src/components/Main/Products/Products.tsx b/src/components/Main/Products/Products.tsx index 68c1970..c02651c 100644 --- a/src/components/Main/Products/Products.tsx +++ b/src/components/Main/Products/Products.tsx @@ -37,7 +37,7 @@ export function Products() {
<span className="text-gradient">Большой опыт в работе</span> с @@ -56,12 +56,12 @@ function Project({ style={{ backgroundImage: `url(${src})` }} /> <div className="p-5"> - <h4 className=" font-medium h4">{title}</h4> + <h4 className="font-medium h4">{title}</h4> <div className="flex gap-2 mt-4"> {tags.map(tag => ( <p key={tag} - className=" opacity-80 font-medium rounded-3xl py-3 px-4 border border-[#798FFF] m-text" + className="opacity-80 font-medium rounded-3xl py-3 px-4 border border-[#798FFF] m-text" > {tag} </p> @@ -78,36 +78,39 @@ function Slider({ projects: { src: string; title: string; tags: string[] }[]; }) { const width = useWindowWidth(); - const baseOffset = useMemo( - () => (width >= 1024 ? 640 : width >= 640 ? 536 : 336), - [width], - ); + const baseOffset = width >= 1024 ? 640 : width >= 640 ? 536 : 336; const [sliderOffset, setSliderOffset] = useState(-baseOffset); const [slide, setSlide] = useState(0); const [order, dispatch] = useReducer( (state: typeof projects, action: string) => { - if (action === 'next') { - setSliderOffset(prev => prev + baseOffset); - return [...state.slice(1), state[2]]; - } if (action === 'prev') { - setSliderOffset(-baseOffset * 2); - return [state[state.length - 3], ...state.slice(0, -1)]; + setSliderOffset(prev => prev + baseOffset); + return [...state.slice(1), state[state.length - 3]]; + } + if (action === 'next') { + setSliderOffset(prev => prev - baseOffset); + return [state[state.length - 2], ...state.slice(0, -1)]; } return state; }, - [projects[projects.length - 1], ...projects, projects[0]], + [ + projects[projects.length - 2], + projects[projects.length - 1], + ...projects, + projects[0], + projects[1], + ], ); const handlers = useSwipeable({ onSwipedLeft: () => { - setSlide(prev => (prev === order.length - 3 ? 0 : prev + 1)); - dispatch('next'); + setSlide(prev => (prev === order.length - 5 ? 0 : prev + 1)); + dispatch('prev'); }, onSwipedRight: () => { - setSlide(prev => (prev === 0 ? order.length - 3 : prev - 1)); - dispatch('prev'); + setSlide(prev => (prev === 0 ? order.length - 5 : prev - 1)); + dispatch('next'); }, trackMouse: true, preventScrollOnSwipe: true, @@ -115,16 +118,18 @@ function Slider({ }); useEffect(() => { - setSliderOffset(-baseOffset); + setSliderOffset(-baseOffset * 2); }, [order, baseOffset, slide]); + useEffect(() => console.log('slider offset:', sliderOffset), [sliderOffset]); + return ( <div className="flex flex-col lg:mt-4 sm:mt-3 mt-2"> <div {...handlers}> <div className="flex gap-2 overflow-visible relative mb-[18px] -mr-10 select-none" style={{ - transition: `${sliderOffset === 0 || sliderOffset === -baseOffset * 2 ? 0 : 0.5}s`, + transition: `${sliderOffset === -baseOffset || sliderOffset === -baseOffset * 3 ? 0 : 0.5}s`, transform: `translateX(${sliderOffset}px)`, }} > @@ -136,7 +141,7 @@ function Slider({ <div className="flex items-center gap-4 lg:w-[clamp(720px,100vw-465px,1135px)] desktop-figma:w-[70.9vw] w-full self-start lg:ml-64"> <button onClick={() => { - setSlide(prev => (prev === 0 ? order.length - 3 : prev - 1)); + setSlide(prev => (prev === 0 ? order.length - 5 : prev - 1)); dispatch('prev'); }} className="max-sm:hidden" @@ -151,7 +156,7 @@ function Slider({ </div> <button onClick={() => { - setSlide(prev => (prev === order.length - 3 ? 0 : prev + 1)); + setSlide(prev => (prev === order.length - 5 ? 0 : prev + 1)); dispatch('next'); }} className="max-sm:hidden" @@ -162,3 +167,27 @@ function Slider({ </div> ); } + +// next +// 2|0 1 2|0 +// |0 1 2|0 1 +// 0|1 2 0|1 + +// prev +// 2|0 1 2|0 +// 1 2|0 1 2| +// 1|2 0 1|2 + +// next +// 1 2|0 1 2|0 1 +// 2|0 1 2|0 1 2 +// 2 0|1 2 0|1 2 +// 0|1 2 0|1 2 0 +// 0 1|2 0 1|2 0 + +// prev +// 1 2|0 1 2|0 1 +// 0 1 2|0 1 2|0 +// 0 1|2 0 1|2 0 +// 2 0 1|2 0 1|2 +// 2 0|1 2 0|1 2 diff --git a/tailwind.config.js b/tailwind.config.js index 0af3623..f9ca156 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,3 @@ -import tailwindScrollbar from 'tailwind-scrollbar'; - /** @type {import('tailwindcss').Config} */ export default { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], @@ -19,5 +17,5 @@ export default { }, }, }, - plugins: [tailwindScrollbar({ nocompatible: true })], + plugins: [], }; diff --git a/yarn.lock b/yarn.lock index abb11bc..1f36895 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2095,11 +2095,6 @@ supports-preserve-symlinks-flag@^1.0.0: resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== -tailwind-scrollbar@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/tailwind-scrollbar/-/tailwind-scrollbar-3.1.0.tgz#ff7596407b6da5209261d8ff03860ab9206a59e3" - integrity sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg== - tailwindcss@^3.4.4: version "3.4.4" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.4.tgz#351d932273e6abfa75ce7d226b5bf3a6cb257c05"