from starhtml import *
from starui import *
settings_tab = Signal("settings_tab", "profile")
profile_name = Signal("profile_name", "John Doe")
profile_email = Signal("profile_email", "[email protected]")
profile_bio = Signal("profile_bio", "")
profile_timezone = Signal("profile_timezone", "utc")
notify_email = Signal("notify_email", True)
notify_push = Signal("notify_push", False)
notify_marketing = Signal("notify_marketing", False)
notify_frequency = Signal("notify_frequency", "weekly")
security_2fa = Signal("security_2fa", False)
security_login_notify = Signal("security_login_notify", True)
settings_ref = Signal("settings_dialog", _ref_only=True)
def tab_button(icon, label, tab_id):
return Button(
Icon(icon, cls="h-4 w-4 mr-2"),
label,
data_on_click=settings_tab.set(tab_id),
data_style_background_color=(settings_tab == tab_id).if_('#f1f5f9', 'transparent'),
data_style_color=(settings_tab == tab_id).if_('#0f172a', '#71717a'),
data_style_box_shadow=(settings_tab == tab_id).if_('0 1px 2px rgba(0,0,0,0.1)', 'none'),
variant="ghost",
size="sm",
cls="flex-1"
)
def profile_tab():
return Div(
InputWithLabel(label="Display Name", placeholder="John Doe", signal=profile_name),
InputWithLabel(label="Email", type="email", placeholder="[email protected]", signal=profile_email),
TextareaWithLabel(label="Bio", placeholder="Tell us about yourself...", rows=3, signal=profile_bio),
SelectWithLabel(
label="Time Zone",
options=[
("utc", "UTC"),
("pst", "Pacific Standard Time"),
("est", "Eastern Standard Time"),
("cet", "Central European Time")
],
signal=profile_timezone
),
data_show=settings_tab == "profile",
cls="space-y-4"
)
def notifications_tab():
return Div(
CheckboxWithLabel(
label="Email notifications",
helper_text="Receive updates and announcements via email",
signal=notify_email
),
CheckboxWithLabel(
label="Push notifications",
helper_text="Get notified about important events",
signal=notify_push
),
CheckboxWithLabel(
label="Marketing emails",
helper_text="Receive product updates and promotional content",
signal=notify_marketing
),
Separator(cls="my-4"),
P("Notification Frequency", cls="text-sm font-medium mb-2"),
SelectWithLabel(
label="Email Digest",
options=[
("never", "Never"),
("daily", "Daily"),
("weekly", "Weekly"),
("monthly", "Monthly")
],
signal=notify_frequency,
helper_text="How often you'd like to receive summary emails"
),
data_show=settings_tab == "notifications",
cls="space-y-4"
)
def security_tab():
return Div(
P("Password", cls="text-sm font-medium mb-2"),
Div(
P("Last changed: 2 months ago", cls="text-sm text-muted-foreground mb-2"),
Button(
"Change Password",
data_on_click=js("alert('Password change dialog would open')"),
variant="outline",
size="sm"
),
cls="mb-4"
),
CheckboxWithLabel(
label="Two-factor authentication",
helper_text="Add an extra layer of security to your account",
signal=security_2fa
),
CheckboxWithLabel(
label="Login notifications",
helper_text="Get notified when someone signs into your account",
signal=security_login_notify
),
Separator(cls="my-4"),
P("Session Management", cls="text-sm font-medium mb-2"),
Div(
P("Active sessions: 3 devices", cls="text-sm text-muted-foreground mb-2"),
Button(
"View All Sessions",
data_on_click=js("alert('Sessions dialog would open')"),
variant="outline",
size="sm"
),
cls="mb-4"
),
data_show=settings_tab == "security",
cls="space-y-4"
)
Dialog(
DialogTrigger(Icon("lucide:settings", cls="h-4 w-4 mr-2"), "Settings"),
DialogContent(
settings_tab,
DialogHeader(
DialogTitle("Settings"),
DialogDescription("Manage your account and application preferences")
),
Div(
tab_button("lucide:user", "Profile", "profile"),
tab_button("lucide:bell", "Notifications", "notifications"),
tab_button("lucide:shield", "Security", "security"),
cls="flex gap-1 mb-6 p-1 bg-muted/30 rounded-lg"
),
profile_tab(),
notifications_tab(),
security_tab(),
DialogFooter(
DialogClose("Cancel", variant="outline"),
Button(
"Save Changes",
data_on_click=settings_ref.close()
)
),
cls="pb-2"
),
signal="settings_dialog",
size="lg"
)