valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: remove BackToTop component and scroll progress bar

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-02 17:30:58 +01:00
parent 3fffe96016
commit a1dcfa34dc
3 changed files with 1 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout.tsx
View File

@@ -39,7 +39,7 @@ export default function RootLayout({
const isProd = process.env.NODE_ENV === 'production'; const isProd = process.env.NODE_ENV === 'production';
return ( return (
<html lang="en"> <html lang="en" className="scrollbar-thin scrollbar-thumb-primary/20 scrollbar-track-transparent">
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />

2
app/page.tsx
View File

@@ -3,13 +3,11 @@ import Hero from '@/components/Hero';
import Stats from '@/components/Stats'; import Stats from '@/components/Stats';
import ToolsGrid from '@/components/ToolsGrid'; import ToolsGrid from '@/components/ToolsGrid';
import Footer from '@/components/Footer'; import Footer from '@/components/Footer';
import BackToTop from '@/components/BackToTop';
export default function Home() { export default function Home() {
return ( return (
<main className="relative min-h-screen text-foreground"> <main className="relative min-h-screen text-foreground">
<AnimatedBackground /> <AnimatedBackground />
<BackToTop />
<Hero /> <Hero />
<Stats /> <Stats />
<ToolsGrid /> <ToolsGrid />

45
components/BackToTop.tsx
View File

@@ -1,45 +0,0 @@
'use client';
import { useState, useEffect, useRef } from 'react';
import { ChevronUp } from 'lucide-react';
export default function BackToTop() {
const [isVisible, setIsVisible] = useState(false);
const barRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const onScroll = () => {
setIsVisible(window.scrollY > 300);
if (barRef.current) {
const el = document.documentElement;
const scrolled = el.scrollTop / (el.scrollHeight - el.clientHeight);
barRef.current.style.transform = `scaleX(${scrolled})`;
}
};
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
<>
{/* Scroll progress bar */}
<div
ref={barRef}
className="fixed top-0 left-0 right-0 h-px bg-primary z-50 origin-left"
style={{ transform: 'scaleX(0)', transition: 'transform 0.1s linear' }}
/>
{/* Back to top button */}
{isVisible && (
<button
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
className="fixed bottom-6 right-6 w-8 h-8 glass rounded-lg flex items-center justify-center text-muted-foreground/40 hover:text-primary hover:border-primary/40 transition-all duration-200 z-40"
aria-label="Back to top"
style={{ animation: 'fadeIn 0.2s ease-out both' }}
>
<ChevronUp className="w-3.5 h-3.5" />
</button>
)}
</>
);
}