aboutsummaryrefslogtreecommitdiff
path: root/src/components/Shifter.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Shifter.tsx')
-rw-r--r--src/components/Shifter.tsx99
1 files changed, 0 insertions, 99 deletions
diff --git a/src/components/Shifter.tsx b/src/components/Shifter.tsx
deleted file mode 100644
index 940e6f0..0000000
--- a/src/components/Shifter.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { sidebarContent } from './Shifter/Sidebar';
-import '../styles/shifter.css';
-
-export default function Shifter() {
- const [sidebar, setSidebar] = useState(0);
- const [position, setPosition] = useState({
- x: window.innerWidth / 2 - 350,
- y: window.innerHeight / 2 - 250
- });
- const [isDragging, setIsDragging] = useState(false);
- const dragRef = useRef({ startX: 0, startY: 0 });
-
- function changeSidebar(window: number) {
- setSidebar(window);
- }
-
- function applyButton() {
-
- }
-
- function closeButton() {
-
- }
-
- function testOption() {
- console.log('Colour changed to red')
-
- document.documentElement.style.setProperty(
- '--titlebar-colour',
- 'red'
- );
-
- localStorage.setItem("--titlebar-colour", "red");
-
- }
-
- const handleMouseDown = (e: React.MouseEvent) => {
- e.preventDefault();
- setIsDragging(true);
- dragRef.current = {
- startX: e.clientX - position.x,
- startY: e.clientY - position.y
- };
- };
-
- React.useEffect(() => {
- if (isDragging) {
- const handleMouseMoveWrapper = (e: MouseEvent) => {
- setPosition({
- x: e.clientX - dragRef.current.startX,
- y: e.clientY - dragRef.current.startY
- });
- };
-
- const handleMouseUpWrapper = () => {
- setIsDragging(false);
- };
-
- window.addEventListener('mousemove', handleMouseMoveWrapper);
- window.addEventListener('mouseup', handleMouseUpWrapper);
-
- return () => {
- window.removeEventListener('mousemove', handleMouseMoveWrapper);
- window.removeEventListener('mouseup', handleMouseUpWrapper);
- };
- }
- }, [isDragging]);
-
- return (
- <>
- <div className="window draggable" style={{
- left: `${position.x}px`,
- top: `${position.y}px`
- }}>
- <div className="titlebar" onMouseDown={handleMouseDown}>
- <div className="titlebar-text">Shifter</div>
- <div className="titlebar-buttons">
- <div className="titlebar-box titlebar-box-link" onClick={() => closeButton()}></div>
- </div>
- </div>
- <div className="content">
- <div className="sidebar">
- <aside className="sidebar-content">
- <a href="#windows" className="sidebar-button" onClick={() => changeSidebar(1)}>Windows</a>
- <div className="sep"/>
- <a href="#reset" className="sidebar-button" onClick={() => changeSidebar(2)}>Reset</a>
- <div className="sep"/>
- </aside>
- <a href="#apply" className="shifter-button" onClick={() => applyButton()}>Apply Changes</a>
- </div>
- <div className="shifter-body">
- {sidebarContent(sidebar)}
- </div>
- </div>
- </div>
- </>
- )
-}