···

       
56
       
56
       
 
       
  return (

     

       
57
       
57
       
 
       
    <>

     

       
58
       
58
       
 
       
      <Modal open={openSettings()} onClose={() => setOpenSettings(false)}>

     

       
59
       
59
       
-
       
        <div class="starting:opacity-0 dark:bg-dark-800/70 border-0.5 dark:shadow-dark-900 backdrop-blur-xs left-50% absolute top-12 -translate-x-1/2 rounded-md border-neutral-300 bg-zinc-200/70 p-4 text-slate-900 shadow-md transition-opacity duration-300 dark:border-neutral-700 dark:text-slate-100">

     

       
59
       
59
       
+
       
        <div class="starting:opacity-0 w-21rem dark:bg-dark-800/70 border-0.5 dark:shadow-dark-900 backdrop-blur-xs left-50% absolute top-12 -translate-x-1/2 rounded-md border-neutral-300 bg-zinc-200/70 p-4 text-slate-900 shadow-md transition-opacity duration-300 dark:border-neutral-700 dark:text-slate-100">

     

       
60
       
60
       
 
       
          <h3 class="border-b-0.5 mb-2 border-neutral-500 pb-2 font-bold">Settings</h3>

     

       
61
       
61
       
 
       
          <h4 class="mb-1 font-semibold">Theme</h4>

     

       
62
       
62
       
-
       
          <div class="w-xs flex gap-2">

     

       
62
       
62
       
+
       
          <div class="flex w-full gap-2">

     

       
63
       
63
       
 
       
            <button

     

       
64
       
64
       
 
       
              classList={{

     

       
65
       
65
       
 
       
                "basis-1/3 py-1 rounded-lg": true,