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]); const [selectedImage, setSelectedImage] = React.useState([1]);
return ( 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 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"> <h1 className="text-4xl md:text-5xl font-bold text-center">How much browser do you want?</h1>
<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>
<p className="mt-4 text-center text-md mx-auto w-2/3 text-muted-foreground"> <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 the one that you don't notice. However, we can assure you that if you want customization, we have you covered
</p> </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} /> <Slider step={1} max={3} showSteps="half" value={selectedImage} onValueChange={setSelectedImage} />
<span className="opacity-90">🌳</span>
</div> </div>
<div className="mx-auto md:mb-36 flex justify-center"> <div className="mx-auto md:mb-36 flex justify-center">
{[...Array(4)].map((_, i) => ( {[...Array(4)].map((_, i) => (