From 8e37806791e4eaf8b5c4cdb12ad9fa32c39a0a41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Tue, 18 Mar 2025 19:47:49 +0100
Subject: [PATCH] jsx files

---
 client/homebrew/brewRenderer/brewRenderer.jsx |  4 +-
 .../brewRenderer/headerNav/headerNav.jsx      | 16 ++--
 .../editor/metadataEditor/metadataEditor.jsx  |  1 -
 .../homebrew/editor/snippetbar/snippetbar.jsx | 96 +++++++++----------
 client/homebrew/editor/tagInput/tagInput.jsx  | 54 +++++------
 .../basePages/listPage/brewItem/brewItem.jsx  |  6 +-
 client/homebrew/pages/homePage/homePage.jsx   | 52 +++++-----
 client/homebrew/pages/newPage/newPage.jsx     | 66 ++++++-------
 shared/naturalcrit/nav/nav.jsx                |  4 +-
 shared/naturalcrit/splitPane/splitPane.jsx    |  4 +-
 10 files changed, 150 insertions(+), 153 deletions(-)

diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index 10d94c5ac..21c0608bd 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -189,14 +189,14 @@ const BrewRenderer = (props)=>{
 				const injectedTags = firstLineTokens.find((obj)=>obj.injectedTags !== undefined)?.injectedTags;
 				if(injectedTags) {
 					styles     = { ...styles, ...injectedTags.styles };
-					styles     = _.mapKeys(styles, (v, k) => k.startsWith('--') ? k : _.camelCase(k)); // Convert CSS to camelCase for React
+					styles     = _.mapKeys(styles, (v, k)=>k.startsWith('--') ? k : _.camelCase(k)); // Convert CSS to camelCase for React
 					classes    = [classes, injectedTags.classes].join(' ').trim();
 					attributes = injectedTags.attributes;
 				}
 				pageText = pageText.includes('\n') ? pageText.substring(pageText.indexOf('\n') + 1) : ''; // Remove the \page line
 			}
 
-			let html = Markdown.render(pageText, index);
+			const html = Markdown.render(pageText, index);
 
 			return <BrewPage className={classes} index={index} key={index} contents={html} style={styles} attributes={attributes} onVisibilityChange={handlePageVisibilityChange} />;
 		}
diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.jsx b/client/homebrew/brewRenderer/headerNav/headerNav.jsx
index cfc10bbd6..04ced2585 100644
--- a/client/homebrew/brewRenderer/headerNav/headerNav.jsx
+++ b/client/homebrew/brewRenderer/headerNav/headerNav.jsx
@@ -25,7 +25,7 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
 			'.toc'         : ()=>{ return 'Table of Contents'; },
 		};
 
-		const getHeaderContent = el => el.querySelector('h1')?.textContent;
+		const getHeaderContent = (el)=>el.querySelector('h1')?.textContent;
 
 		const topLevelPageSelector = Object.keys(topLevelPages).join(',');
 
@@ -52,25 +52,23 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
 				depth : 7,              // All unmatched elements with IDs are set to the maximum depth (7)
 				text  : el.textContent, // Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto'
 				link  : el.id
-			}
+			};
 			if(el.classList.contains('page')) {
 				let text = `Page ${el.id.slice(1)}`; // Get the page # by trimming off the 'p' from the ID
-				const pageType = Object.keys(topLevelPages).find(pageType => el.querySelector(pageType));
-				if (pageType)
-					text += ` - ${topLevelPages[pageType](el, pageType)}` // If a Top Level Page, add extra label
+				const pageType = Object.keys(topLevelPages).find((pageType)=>el.querySelector(pageType));
+				if(pageType)
+					text += ` - ${topLevelPages[pageType](el, pageType)}`; // If a Top Level Page, add extra label
 
 				navEntry.depth     = 0; // Pages are always at the least indented level
 				navEntry.text      = text;
 				navEntry.className = 'pageLink';
-			}
-			else if(el.localName.match(/^h[1-6]/)){  // Header elements H1 through H6
+			} else if(el.localName.match(/^h[1-6]/)){  // Header elements H1 through H6
 				navEntry.depth = el.localName[1];      // Depth is set by the header level
 			}
 			navList.push(navEntry);
 		});
 
-		return _.map(navList, (navItem, index)=>
-			<HeaderNavItem {...navItem} key={index} />
+		return _.map(navList, (navItem, index)=><HeaderNavItem {...navItem} key={index} />
 		);
 	};
 
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index 0bafb3f9f..8f256922f 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -4,7 +4,6 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
 import request from '../../utils/request-middleware.js';
-const Nav = require('naturalcrit/nav/nav.jsx');
 const Combobox = require('client/components/combobox.jsx');
 const TagInput = require('../tagInput/tagInput.jsx');
 
diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index f7d9508f8..4d702bfdf 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -207,59 +207,59 @@ const Snippetbar = createClass({
 	renderEditorButtons : function(){
 		if(!this.props.showEditButtons) return;
 
-		
+
 
 		return (
-		<div className='editors'>
-			{this.props.view !== 'meta' && <><div className='historyTools'>
-				<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
-					onClick={this.toggleHistoryMenu} >
-					<i className='fas fa-clock-rotate-left' />
-					{ this.state.showHistory && this.renderHistoryItems() }
+			<div className='editors'>
+				{this.props.view !== 'meta' && <><div className='historyTools'>
+					<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
+						onClick={this.toggleHistoryMenu} >
+						<i className='fas fa-clock-rotate-left' />
+						{ this.state.showHistory && this.renderHistoryItems() }
+					</div>
+					<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
+						onClick={this.props.undo} >
+						<i className='fas fa-undo' />
+					</div>
+					<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
+						onClick={this.props.redo} >
+						<i className='fas fa-redo' />
+					</div>
 				</div>
-				<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
-					onClick={this.props.undo} >
-					<i className='fas fa-undo' />
-				</div>
-				<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
-					onClick={this.props.redo} >
-					<i className='fas fa-redo' />
-				</div>
-			</div>
-			<div className='codeTools'>
-			<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
-				onClick={this.props.foldCode} >
-				<i className='fas fa-compress-alt' />
-			</div>
-			<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
-				onClick={this.props.unfoldCode} >
-				<i className='fas fa-expand-alt' />
-			</div>
-				<div className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
-					onClick={this.toggleThemeSelector} >
-					<i className='fas fa-palette' />
-					{this.state.themeSelector && this.renderThemeSelector()}
-				</div>
-			</div></>}
-	
+				<div className='codeTools'>
+					<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
+						onClick={this.props.foldCode} >
+						<i className='fas fa-compress-alt' />
+					</div>
+					<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
+						onClick={this.props.unfoldCode} >
+						<i className='fas fa-expand-alt' />
+					</div>
+					<div className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
+						onClick={this.toggleThemeSelector} >
+						<i className='fas fa-palette' />
+						{this.state.themeSelector && this.renderThemeSelector()}
+					</div>
+				</div></>}
 
-			<div className='tabs'>
-				<div className={cx('text', { selected: this.props.view === 'text' })}
-					onClick={()=>this.props.onViewChange('text')}>
-					<i className='fa fa-beer' />
-				</div>
-				<div className={cx('style', { selected: this.props.view === 'style' })}
-					onClick={()=>this.props.onViewChange('style')}>
-					<i className='fa fa-paint-brush' />
-				</div>
-				<div className={cx('meta', { selected: this.props.view === 'meta' })}
-					onClick={()=>this.props.onViewChange('meta')}>
-					<i className='fas fa-info-circle' />
-				</div>
-			</div>
 
-		</div>
-		)
+				<div className='tabs'>
+					<div className={cx('text', { selected: this.props.view === 'text' })}
+						onClick={()=>this.props.onViewChange('text')}>
+						<i className='fa fa-beer' />
+					</div>
+					<div className={cx('style', { selected: this.props.view === 'style' })}
+						onClick={()=>this.props.onViewChange('style')}>
+						<i className='fa fa-paint-brush' />
+					</div>
+					<div className={cx('meta', { selected: this.props.view === 'meta' })}
+						onClick={()=>this.props.onViewChange('meta')}>
+						<i className='fas fa-info-circle' />
+					</div>
+				</div>
+
+			</div>
+		);
 	},
 
 	render : function(){
diff --git a/client/homebrew/editor/tagInput/tagInput.jsx b/client/homebrew/editor/tagInput/tagInput.jsx
index 816541167..d60e23b1b 100644
--- a/client/homebrew/editor/tagInput/tagInput.jsx
+++ b/client/homebrew/editor/tagInput/tagInput.jsx
@@ -3,43 +3,43 @@ const React = require('react');
 const { useState, useEffect } = React;
 const _     = require('lodash');
 
-const TagInput = ({ unique = true, values = [], ...props }) => {
+const TagInput = ({ unique = true, values = [], ...props })=>{
 	const [tempInputText, setTempInputText] = useState('');
-	const [tagList, setTagList] = useState(values.map((value) => ({ value, editing: false })));
+	const [tagList, setTagList] = useState(values.map((value)=>({ value, editing: false })));
 
 	useEffect(()=>{
-		handleChange(tagList.map((context)=>context.value))
-	}, [tagList])
+		handleChange(tagList.map((context)=>context.value));
+	}, [tagList]);
 
 	const handleChange = (value)=>{
 		props.onChange({
 			target : { value }
-		})
+		});
 	};
 
-	const handleInputKeyDown = ({ evt, value, index, options = {} }) => {
-		if (_.includes(['Enter', ','], evt.key)) {
+	const handleInputKeyDown = ({ evt, value, index, options = {} })=>{
+		if(_.includes(['Enter', ','], evt.key)) {
 			evt.preventDefault();
 			submitTag(evt.target.value, value, index);
-			if (options.clear) {
+			if(options.clear) {
 				setTempInputText('');
 			}
 		}
 	};
 
-	const submitTag = (newValue, originalValue, index) => {
-		setTagList((prevContext) => {
+	const submitTag = (newValue, originalValue, index)=>{
+		setTagList((prevContext)=>{
 			// remove existing tag
 			if(newValue === null){
 				return [...prevContext].filter((context, i)=>i !== index);
 			}
 			// add new tag
 			if(originalValue === null){
-				return [...prevContext, { value: newValue, editing: false }]
+				return [...prevContext, { value: newValue, editing: false }];
 			}
 			// update existing tag
-			return prevContext.map((context, i) => {
-				if (i === index) {
+			return prevContext.map((context, i)=>{
+				if(i === index) {
 					return { ...context, value: newValue, editing: false };
 				}
 				return context;
@@ -47,10 +47,10 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
 		});
 	};
 
-	const editTag = (index) => {
-		setTagList((prevContext) => {
-			return prevContext.map((context, i) => {
-				if (i === index) {
+	const editTag = (index)=>{
+		setTagList((prevContext)=>{
+			return prevContext.map((context, i)=>{
+				if(i === index) {
 					return { ...context, editing: true };
 				}
 				return { ...context, editing: false };
@@ -58,25 +58,25 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
 		});
 	};
 
-	const renderReadTag = (context, index) => {
+	const renderReadTag = (context, index)=>{
 		return (
 			<li key={index}
 				data-value={context.value}
 				className='tag'
-				onClick={() => editTag(index)}>
+				onClick={()=>editTag(index)}>
 				{context.value}
-				<button onClick={(evt)=>{evt.stopPropagation(); submitTag(null, context.value, index)}}><i className='fa fa-times fa-fw'/></button>
+				<button onClick={(evt)=>{evt.stopPropagation(); submitTag(null, context.value, index);}}><i className='fa fa-times fa-fw'/></button>
 			</li>
 		);
 	};
 
-	const renderWriteTag = (context, index) => {
+	const renderWriteTag = (context, index)=>{
 		return (
 			<input type='text'
 				key={index}
-				defaultValue={context.value} 
-				onKeyDown={(evt) => handleInputKeyDown({evt, value: context.value, index: index})} 
-				autoFocus 
+				defaultValue={context.value}
+				onKeyDown={(evt)=>handleInputKeyDown({ evt, value: context.value, index: index })}
+				autoFocus
 			/>
 		);
 	};
@@ -86,7 +86,7 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
 			<label>{props.label}</label>
 			<div className='value'>
 				<ul className='list'>
-					{tagList.map((context, index) => { return context.editing ? renderWriteTag(context, index) : renderReadTag(context, index); })}
+					{tagList.map((context, index)=>{ return context.editing ? renderWriteTag(context, index) : renderReadTag(context, index); })}
 				</ul>
 
 				<input
@@ -94,8 +94,8 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
 					className='value'
 					placeholder={props.placeholder}
 					value={tempInputText}
-					onChange={(e) => setTempInputText(e.target.value)}
-					onKeyDown={(evt) => handleInputKeyDown({ evt, value: null, options: { clear: true } })}
+					onChange={(e)=>setTempInputText(e.target.value)}
+					onKeyDown={(evt)=>handleInputKeyDown({ evt, value: null, options: { clear: true } })}
 				/>
 			</div>
 		</div>
diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
index ef98e8425..ef309a613 100644
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
@@ -30,11 +30,11 @@ const BrewItem = ({
 		}
 
 		request.delete(`/api/${brew.googleId ?? ''}${brew.editId}`).send().end((err, res)=>{
-				if (err) reportError(err); else window.location.reload();
-        });
+			if(err) reportError(err); else window.location.reload();
+		});
 	}, [brew, reportError]);
 
-	const updateFilter = useCallback((type, term)=> updateListFilter(type, term), [updateListFilter]);
+	const updateFilter = useCallback((type, term)=>updateListFilter(type, term), [updateListFilter]);
 
 	const renderDeleteBrewLink = ()=>{
 		if(!brew.editId) return null;
diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx
index 00d0c801d..b9c1b7371 100644
--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/client/homebrew/pages/homePage/homePage.jsx
@@ -100,32 +100,32 @@ const HomePage = createClass({
 		return <div className='homePage sitePage'>
 			<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
 			{this.renderNavbar()}
-			<div className="content">
-			<SplitPane onDragFinish={this.handleSplitMove}>
-				<Editor
-					ref={this.editor}
-					brew={this.state.brew}
-					onTextChange={this.handleTextChange}
-					renderer={this.state.brew.renderer}
-					showEditButtons={false}
-					snippetBundle={this.state.themeBundle.snippets}
-					onCursorPageChange={this.handleEditorCursorPageChange}
-					onViewPageChange={this.handleEditorViewPageChange}
-					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-				/>
-				<BrewRenderer
-					text={this.state.brew.text}
-					style={this.state.brew.style}
-					renderer={this.state.brew.renderer}
-					onPageChange={this.handleBrewRendererPageChange}
-					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-					themeBundle={this.state.themeBundle}
-				/>
-			</SplitPane>
+			<div className='content'>
+				<SplitPane onDragFinish={this.handleSplitMove}>
+					<Editor
+						ref={this.editor}
+						brew={this.state.brew}
+						onTextChange={this.handleTextChange}
+						renderer={this.state.brew.renderer}
+						showEditButtons={false}
+						snippetBundle={this.state.themeBundle.snippets}
+						onCursorPageChange={this.handleEditorCursorPageChange}
+						onViewPageChange={this.handleEditorViewPageChange}
+						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+					/>
+					<BrewRenderer
+						text={this.state.brew.text}
+						style={this.state.brew.style}
+						renderer={this.state.brew.renderer}
+						onPageChange={this.handleBrewRendererPageChange}
+						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+						themeBundle={this.state.themeBundle}
+					/>
+				</SplitPane>
 			</div>
 			<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
 				Save current <i className='fas fa-save' />
diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx
index 1d5887b8a..7aaeb3fd3 100644
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -223,39 +223,39 @@ const NewPage = createClass({
 	render : function(){
 		return <div className='newPage sitePage'>
 			{this.renderNavbar()}
-			<div className="content">
-			<SplitPane onDragFinish={this.handleSplitMove}>
-				<Editor
-					ref={this.editor}
-					brew={this.state.brew}
-					onTextChange={this.handleTextChange}
-					onStyleChange={this.handleStyleChange}
-					onMetaChange={this.handleMetaChange}
-					renderer={this.state.brew.renderer}
-					userThemes={this.props.userThemes}
-					themeBundle={this.state.themeBundle}
-					snippetBundle={this.state.themeBundle.snippets}
-					onCursorPageChange={this.handleEditorCursorPageChange}
-					onViewPageChange={this.handleEditorViewPageChange}
-					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-				/>
-				<BrewRenderer
-					text={this.state.brew.text}
-					style={this.state.brew.style}
-					renderer={this.state.brew.renderer}
-					theme={this.state.brew.theme}
-					themeBundle={this.state.themeBundle}
-					errors={this.state.htmlErrors}
-					lang={this.state.brew.lang}
-					onPageChange={this.handleBrewRendererPageChange}
-					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-					allowPrint={true}
-				/>
-			</SplitPane>
+			<div className='content'>
+				<SplitPane onDragFinish={this.handleSplitMove}>
+					<Editor
+						ref={this.editor}
+						brew={this.state.brew}
+						onTextChange={this.handleTextChange}
+						onStyleChange={this.handleStyleChange}
+						onMetaChange={this.handleMetaChange}
+						renderer={this.state.brew.renderer}
+						userThemes={this.props.userThemes}
+						themeBundle={this.state.themeBundle}
+						snippetBundle={this.state.themeBundle.snippets}
+						onCursorPageChange={this.handleEditorCursorPageChange}
+						onViewPageChange={this.handleEditorViewPageChange}
+						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+					/>
+					<BrewRenderer
+						text={this.state.brew.text}
+						style={this.state.brew.style}
+						renderer={this.state.brew.renderer}
+						theme={this.state.brew.theme}
+						themeBundle={this.state.themeBundle}
+						errors={this.state.htmlErrors}
+						lang={this.state.brew.lang}
+						onPageChange={this.handleBrewRendererPageChange}
+						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+						allowPrint={true}
+					/>
+				</SplitPane>
 			</div>
 		</div>;
 	}
diff --git a/shared/naturalcrit/nav/nav.jsx b/shared/naturalcrit/nav/nav.jsx
index d9b403239..50dff4c33 100644
--- a/shared/naturalcrit/nav/nav.jsx
+++ b/shared/naturalcrit/nav/nav.jsx
@@ -12,8 +12,8 @@ const Nav = {
 		displayName : 'Nav.base',
 		render      : function(){
 			return <nav>
-					{this.props.children}
-					</nav>;
+				{this.props.children}
+			</nav>;
 		}
 	}),
 	logo : function(){
diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx
index 1500c759f..4c77d81a5 100644
--- a/shared/naturalcrit/splitPane/splitPane.jsx
+++ b/shared/naturalcrit/splitPane/splitPane.jsx
@@ -29,8 +29,8 @@ const SplitPane = (props)=>{
 	const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x)));
 
 	//when resizing, the divider should grow smaller if less space is given, then grow back if the space is restored, to the original position
-	const handleResize = () =>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
-	
+	const handleResize = ()=>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
+
 	const handleUp =(e)=>{
 		e.preventDefault();
 		if(isDragging) {