ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-08 17:30:01 +02:00
Code Issues Projects Releases Packages Wiki Activity

Update browser-slider component

Browse source
This commit is contained in:
mr. M 2024-10-12 16:43:04 +02:00
parent 3082be1dc6
commit e5f90fb449
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
1 changed files with 5 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/browser-slider.tsx
View file

@ -10,21 +10,15 @@ export default function BrowserComplexityExample() {
const [selectedImage, setSelectedImage] = React.useState([1]);
return (
<div className="flex h-screen items-center flex-col mx-auto mb-32 xl:mb-64 w-full md:w-5/6 lg:w-3/4">
<div className="flex items-center text-2xl cursor-default font-bold select-none">
<span>🌱</span>
<div className="flex mx-5 items-center opacity-10">
<ChevronLeft className="w-5 h-5" style={{ marginInlineEnd: "-0.8rem" }} />
<span className="w-24 bg-black dark:bg-white h-0.5"></span>
<ChevronRight className="w-5 h-5" style={{ marginInlineStart: "-0.8rem" }} />
</div>
<span>🌳</span>
</div>
<h1 className="text-4xl md:text-5xl font-bold text-center">How much browser do you want?</h1>
<p className="mt-4 text-center text-md mx-auto w-2/3 text-muted-foreground">
Zen Browser is designed to be simple and easy to use. We believe that the best software is
Zen is designed to be simple and easy to use. We believe that the best software is
the one that you don't notice. However, we can assure you that if you want customization, we have you covered
</p>
<div className="w-64 mb-6 mt-24">
<div className="w-64 mb-6 mt-12 flex gap-4">
<span className="opacity-90">🌱</span>
<Slider step={1} max={3} showSteps="half" value={selectedImage} onValueChange={setSelectedImage} />
<span className="opacity-90">🌳</span>
</div>
<div className="mx-auto md:mb-36 flex justify-center">
{[...Array(4)].map((_, i) => (