Components
Loading preview...
A celestial-themed toggle switch with a smooth animation and mirroring option. Credit: https://codepen.io/nicolasjesenberger/pen/NWOyxyO https://dribbble.com/shots/14326768-Kn-bz-Skeuomorphic-UI-Sample-for-Figma
@Northstrix
npx shadcn@latest add https://21st.dev/r/maxim.bort.devel/shamayim-toggle-switchimport { ShamayimToggleSwitch } from "@/components/ui/shamayim-toggle-switch";
import React, { useState } from "react";
export default function DemoShamayimToggleSwitch() {
// 16 patterns, 2 toggles per pattern
const [states, setStates] = useState(Array(32).fill(false));
const patterns = [
{ key: "checker", label: "Checker Pattern" },
{ key: "conic", label: "Conic Pattern" },
{ key: "linear", label: "Linear Pattern" },
{ key: "dots", label: "Dots Pattern" },
{ key: "grid", label: "Grid Pattern" },
{ key: "zigzag", label: "Zigzag Pattern" },
{ key: "waves", label: "Waves Pattern" },
{ key: "cross", label: "Cross Pattern" },
{ key: "hex", label: "Hex Pattern" },
{ key: "bricks", label: "Bricks Pattern" },
{ key: "triangles", label: "Triangles Pattern" },
{ key: "stars", label: "Stars Pattern" },
{ key: "rings", label: "Rings Pattern" },
{ key: "plaid", label: "Plaid Pattern" },
{ key: "honeycomb", label: "Honeycomb Pattern" },
{ key: "plus", label: "Plus Pattern" },
] as const;
return (
<div className="flex flex-col items-center w-full max-w-xl mx-auto space-y-16">
{patterns.map((p, i) => (
<React.Fragment key={p.key}>
<div
className="text-center text-[#47b6d1] font-semibold text-lg"
style={{ marginTop: i === 0 ? 100 : 100, marginBottom: 24 }}
>
{p.label}
</div>
<div className="flex flex-col justify-center items-center gap-2 w-full rounded-xl bg-gradient-to-br from-[#47b6d1] to-[#90e0ec] text-2xl p-8 h-[240px] mb-6">
<div className="flex items-center gap-4">
<span className="text-[#E0F9FC]">Mobile Data</span>
<ShamayimToggleSwitch
defaultState={states[i * 2]}
onChange={v =>
setStates(arr => {
const copy = [...arr];
copy[i * 2] = v;
return copy;
})
}
pattern={p.key as any}
/>
</div>
<div className="flex items-center gap-4">
<ShamayimToggleSwitch
defaultState={states[i * 2 + 1]}
mirrored
onChange={v =>
setStates(arr => {
const copy = [...arr];
copy[i * 2 + 1] = v;
return copy;
})
}
pattern={p.key as any}
/>
<span className="text-[#E0F9FC]">נתונים סלולריים</span>
</div>
</div>
</React.Fragment>
))}
</div>
);
}