gavin/Tarokka
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

tweaks

Browse Source
This commit is contained in:
Gavin McDonald
2025-04-16 16:14:03 -04:00
parent 14dc1139fb
commit 40cc0f3ab8
3 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/CopyButton.tsx
View File

@@ -1,7 +1,7 @@
'use client'; 'use client';
import { useState } from 'react'; import { useState } from 'react';
import { Copy as CopyIcon } from 'lucide-react'; import { Copy as CopyIcon, Check as CheckIcon } from 'lucide-react';
import ToolTip from '@/components/ToolTip'; import ToolTip from '@/components/ToolTip';
@@ -30,8 +30,12 @@ export default function CopyButton({ title, copy }: CopyButtonProps) {
className="w-full py-1 px-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg flex flex-col items-start gap-1 shadow transition-all cursor-pointer" className="w-full py-1 px-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg flex flex-col items-start gap-1 shadow transition-all cursor-pointer"
> >
<div className="flex items-center gap-2 w-full text-sm font-medium"> <div className="flex items-center gap-2 w-full text-sm font-medium">
{`${copied ? 'Copied' : 'Copy'} ${title}`} {`Copy ${title}`}
<CopyIcon className="ml-auto" size={16} /> {copied ? (
<CheckIcon className="ml-auto" size={16} />
) : (
<CopyIcon className="ml-auto" size={16} />
)}
</div> </div>
</button> </button>
</ToolTip> </ToolTip>

6
components/Switch.tsx
View File

@@ -17,9 +17,9 @@ export default function Switch({ label, value, toggleAction }: SwitchProps) {
}`} }`}
/> />
<div <div
className={`absolute top-[2px] left-[2px] w-3 h-3 rounded-full transition ${ className={`absolute top-[2px] left-[2px] w-3 h-3 rounded-full transition-transform duration-200 ease-out transform
value ? 'translate-x-4' : '' ${value ? 'translate-x-4 scale-110 shadow-[0_0_2px_2px_rgba(255,255,255,0.4)]' : 'scale-95'}
} ${value ? 'bg-gray-100' : 'bg-gray-400'}`} ${value ? 'bg-gray-100' : 'bg-gray-400'}`}
/> />
</div> </div>
</label> </label>

8
components/ToolTip.tsx
View File

@@ -37,13 +37,17 @@ export default function Tooltip({
const handleMouseMove = (e: React.MouseEvent) => { const handleMouseMove = (e: React.MouseEvent) => {
const { clientX: x, clientY: y } = e; const { clientX: x, clientY: y } = e;
const ttWidth = ttRef.current?.offsetWidth || 0;
const ttHeight = ttRef.current?.offsetHeight || 0; const ttHeight = ttRef.current?.offsetHeight || 0;
const viewportWidth = window.innerWidth - edgeBuffer;
const viewportHeight = window.innerHeight - edgeBuffer; const viewportHeight = window.innerHeight - edgeBuffer;
const ttRight = ttWidth + offsetX + x;
const ttBottom = ttHeight + offsetY + y; const ttBottom = ttHeight + offsetY + y;
const adjustment = ttBottom > viewportHeight ? ttBottom - viewportHeight : 0; const adjustX = ttRight > viewportWidth ? ttRight - viewportWidth : 0;
const adjustY = ttBottom > viewportHeight ? ttBottom - viewportHeight : 0;
setPos({ x, y: y - adjustment }); setPos({ x: x - adjustX, y: y - adjustY });
}; };
const handleTouchStart = () => { const handleTouchStart = () => {