Update browser-slider component

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

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) => (