mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 17:30:01 +02:00
Update browser-slider component
This commit is contained in:
parent
3082be1dc6
commit
e5f90fb449
1 changed files with 5 additions and 11 deletions
|
@ -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) => (
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue