nitro-web 0.0.32 → 0.0.34

package/client/index.ts

@@ -48,7 +48,6 @@ export { FieldCurrency, type FieldCurrencyProps } from '../components/partials/f
 export { FieldDate, type FieldDateProps } from '../components/partials/form/field-date'
 export { Location } from '../components/partials/form/location'
 export { Select, getSelectStyle } from '../components/partials/form/select'
-export { Toggle } from '../components/partials/form/toggle'
 
 // Component Other
 export { IsFirstRender } from '../components/partials/is-first-render'

package/components/auth/auth.api.js

@@ -6,7 +6,7 @@ import { Strategy as JwtStrategy, ExtractJwt } from 'passport-jwt'
 import db from 'monastery'
 import jsonwebtoken from 'jsonwebtoken'
 import { sendEmail } from 'nitro-web/server'
-import * as util from 'nitro-web/util'
+import { isArray, pick, isString, ucFirst, fullNameSplit } from 'nitro-web/util'
 
 let config = {}
 const JWT_SECRET = process.env.JWT_SECRET || 'replace_this_with_secure_env_secret'
@@ -32,9 +32,13 @@ export default {
 }
 
 function setup(middleware, _config) {
+  // Setup is called automatically when the server starts
   // Set config values
-  config = { env: _config.env, masterPassword: _config.masterPassword }
-  if (!config.env) throw new Error('Missing config value for: config.env')
+  const configKeys = ['clientUrl', 'emailFrom', 'env', 'mailgunDomain', 'mailgunKey', 'masterPassword', 'name']
+  config = pick(_config, configKeys)
+  for (const key of configKeys) {
+    if (!config[key]) throw new Error(`Missing config value for: config.${key}`)
+  }
 
   passport.use(
     new passportLocal.Strategy(
@@ -102,7 +106,7 @@ async function signup(req, res) {
     sendEmail({
       config: config,
       template: 'welcome',
-      to: `${util.ucFirst(user.firstName)}<${user.email}>`,
+      to: `${ucFirst(user.firstName)}<${user.email}>`,
     }).catch(console.error)
     res.send(await signinAndGetState(user, req.query.desktop))
   } catch (err) {
@@ -133,7 +137,7 @@ function signout(req, res) {
 async function resetInstructions(req, res) {
   try {
     let email = (req.body.email || '').trim().toLowerCase()
-    if (!email || !util.isString(email)) throw { title: 'email', detail: 'The email you entered is incorrect.' }
+    if (!email || !isString(email)) throw { title: 'email', detail: 'The email you entered is incorrect.' }
 
     let user = await db.user.findOne({ query: { email }, _privateData: true })
     if (!user) throw { title: 'email', detail: 'The email you entered is incorrect.' }
@@ -145,7 +149,7 @@ async function resetInstructions(req, res) {
     sendEmail({
       config: config,
       template: 'reset-password',
-      to: `${util.ucFirst(user.firstName)}<${email}>`,
+      to: `${ucFirst(user.firstName)}<${email}>`,
       data: {
         token: resetToken + (req.query.hasOwnProperty('desktop') ? '?desktop' : ''),
       },
@@ -271,21 +275,21 @@ async function validatePassword(password='', password2) {
   }
 }
 
-export async function userCreate({ name, businessName, email, password }) {
+export async function userCreate({ name, business, email, password }) {
   try {
     const options = { blacklist: ['-_id'] }
     const userId = db.id()
     const companyData = {
       _id: db.id(), 
-      business: { name: businessName },
+      ...(business ? { business } : {}),
       users: [{ _id: userId, role: 'owner', status: 'active' }],
     }
     const userData = {
       _id: userId, 
       company: companyData._id,
       email: email,
-      firstName: util.fullNameSplit(name)[0],
-      lastName: util.fullNameSplit(name)[1],
+      firstName: fullNameSplit(name)[0],
+      lastName: fullNameSplit(name)[1],
       password: password ? await (await import('bcrypt')).hash(password, 10) : undefined,
     }
 
@@ -298,7 +302,7 @@ export async function userCreate({ name, businessName, email, password }) {
 
     // Throw all the errors from at once
     const errors = results.filter(o => o.status == 'rejected').reduce((acc, o) => {
-      if (util.isArray(o.reason)) acc.push(...o.reason)
+      if (isArray(o.reason)) acc.push(...o.reason)
       else throw o.reason
       return acc
     }, [])
@@ -312,7 +316,7 @@ export async function userCreate({ name, businessName, email, password }) {
     return await findUserFromProvider({ _id: userId })
 
   } catch (err) {
-    if (!util.isArray(err)) throw err
+    if (!isArray(err)) throw err
     throw err.map((o) => {
       if (o.title == 'firstName') o.title = 'name'
       return o

package/components/partials/element/button.tsx

@@ -29,16 +29,16 @@ export function Button({
   const iconPosition = IconLeft ? 'left' : IconLeftEnd ? 'leftEnd' : IconRight ? 'right' : IconRightEnd ? 'rightEnd' : 'none'
   const base = 
     'relative inline-block text-center font-medium shadow-sm focus-visible:outline focus-visible:outline-2 ' +
-    'focus-visible:outline-offset-2 text-white'
+    'focus-visible:outline-offset-2 text-white [&>.loader]:border-white'
 
   // Button colors, you can use custom colors by using className instead
   const colors = {
     primary: 'bg-primary hover:bg-primary-hover',
     secondary: 'bg-secondary hover:bg-secondary-hover',
     black: 'bg-black hover:bg-gray-700',
-    white: 'bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 [&>.loader]:border-black',
+    white: 'bg-white ring-1 ring-inset ring-gray-300 hover:bg-gray-50 text-gray-900 [&>.loader]:border-black',
   }
-
+  
   // Button sizes
   const sizes = {
     xs: 'px-2 py-1 px-button-x-xs py-button-y-xs text-xs rounded',
@@ -67,7 +67,7 @@ export function Button({
         isLoading &&
         <span className={
           'loader !opacity-100 absolute top-[50%] left-[50%] w-[1rem] h-[1rem] ml-[-0.5rem] mt-[-0.5rem] ' +
-          'rounded-full animate-spin border-2 !border-t-transparent border-white'
+          'rounded-full animate-spin border-2 !border-t-transparent'
         } />
       }
     </button>

package/components/partials/element/calendar.tsx

@@ -87,8 +87,8 @@ export function Calendar({ mode='single', onChange, value, numberOfMonths, month
       months: `${d.months} flex-nowrap`,
       month_caption: `${d.month_caption} text-2xs pl-2`,
       caption_label: `${d.caption_label} z-auto`,
-      button_previous: `${d.button_previous} size-8`,// [&:hover>svg]:fill-primary-dark`,
-      button_next: `${d.button_next} size-8`,// [&:hover>svg]:fill-primary-dark`,
+      button_previous: `${d.button_previous} size-8`,// [&:hover>svg]:fill-input-border-focus`,
+      button_next: `${d.button_next} size-8`,// [&:hover>svg]:fill-input-border-focus`,
       chevron: `${d.chevron} fill-black size-[18px]`,
 
       // Days
@@ -98,12 +98,12 @@ export function Calendar({ mode='single', onChange, value, numberOfMonths, month
 
       // States
       focused: `${d.focused} [&>button]:bg-gray-200 [&>button]:border-gray-200`,
-      range_start: `${d.range_start} [&>button]:!bg-primary-dark [&>button]:!border-primary-dark`,
-      range_end: `${d.range_end} [&>button]:!bg-primary-dark [&>button]:!border-primary-dark`,
+      range_start: `${d.range_start} [&>button]:!bg-input-border-focus [&>button]:!border-input-border-focus`,
+      range_end: `${d.range_end} [&>button]:!bg-input-border-focus [&>button]:!border-input-border-focus`,
       selected: `${d.selected} font-normal `
         + '[&:not(.rangemiddle)>button]:!text-white '
-        + '[&:not(.rangemiddle)>button]:!bg-primary-dark '
-        + '[&:not(.rangemiddle)>button]:!border-primary-dark ',
+        + '[&:not(.rangemiddle)>button]:!bg-input-border-focus '
+        + '[&:not(.rangemiddle)>button]:!border-input-border-focus ',
     },
   }
 

package/components/partials/element/sidebar.tsx

@@ -10,6 +10,7 @@ import {
   ArrowLeftCircleIcon,
   PaintBrushIcon,
 } from '@heroicons/react/24/outline'
+
 const sidebarWidth = 'lg:w-80'
 
 export type SidebarProps = {

package/components/partials/element/topbar.tsx

@@ -1,27 +1,15 @@
 type TopbarProps = {
   title: React.ReactNode
   subtitle?: React.ReactNode
-  submenu?: React.ReactNode
-  btns?: React.ReactNode
   className?: string
 }
 
-export function Topbar({ title, subtitle, submenu, btns, className }: TopbarProps) {
+export function Topbar({ title, subtitle, className }: TopbarProps) {
   return (
-    <div class={`flex justify-between items-end mb-6 nitro-topbar ${className||''}`}>
-      <div class="flex flex-col min-h-12">
-        { subtitle && <div class="py-2 text-sm">{subtitle}</div>}
-        <div class="flex items-center py-2">
-          <h1 class="h1 mb-0">{title}</h1>
-        </div>
-        { 
-          submenu && 
-          <div class="pt-2 text-large weight-500">{submenu}</div>
-        }
-      </div>
-      <div class="">
-        {btns}
-      </div>
+    <div class={`flex flex-col min-h-12 gap-0.5 mb-6 nitro-topbar ${className||''}`}>
+      <div class="text-2xl font-bold">{title}</div>
+      { subtitle && <div class="text-sm text-muted-foreground">{subtitle}</div>}
+      {/* { submenu && <div class="pt-2 text-large weight-500">{submenu}</div> } */}
     </div>
   )
 }

package/components/partials/form/checkbox.tsx

@@ -42,7 +42,13 @@ export function Checkbox({ name, id, size='sm', subtext, text, type='checkbox',
                 id={id}
                 name={name}
                 type={type}
-                className={`${type === 'radio' ? 'rounded-full' : 'rounded'} col-start-1 row-start-1 appearance-none border border-gray-300 bg-white checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto`}
+                className={
+                  `${type === 'radio' ? 'rounded-full' : 'rounded'} col-start-1 row-start-1 appearance-none border border-gray-300 bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto ` + 
+                  // Default
+                  'checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-blue-600 ' +
+                  // Variable-selected color defined?
+                  'checked:!border-variable-selected checked:!bg-variable-selected indeterminate:!border-variable-selected indeterminate:!bg-variable-selected focus-visible:!outline-variable-selected'
+                }
               />
               <svg
                 fill="none"
@@ -89,7 +95,15 @@ export function Checkbox({ name, id, size='sm', subtext, text, type='checkbox',
               />
               <label 
                 for={id}
-                className={`col-start-1 row-start-1 relative ${_size.toggleWidth} ${_size.toggleHeight} bg-gray-200 peer-focus-visible:outline-none peer-focus-visible:ring-4 peer-focus-visible:ring-blue-300 dark:peer-focus-visible:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full ${_size.toggleAfterSize} after:transition-all dark:border-gray-600 peer-checked:bg-blue-600`}
+                className={
+                  `col-start-1 row-start-1 relative ${_size.toggleWidth} ${_size.toggleHeight} bg-gray-200 peer-focus-visible:outline-none peer-focus-visible:ring-4 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full ${_size.toggleAfterSize} after:transition-all ` +
+                  // Default
+                  'peer-focus-visible:ring-blue-300 peer-checked:bg-blue-600 ' +
+                  // Variable-selected color defined?
+                  'peer-focus-visible:!ring-variable-selected peer-checked:!bg-variable-selected '
+                  // Dark mode not used yet...
+                  // 'dark:peer-focus-visible:ring-blue-800 dark:bg-gray-700 dark:border-gray-600 '
+                }
               />
             </div>
         }

package/components/partials/form/field-date.tsx

@@ -179,7 +179,7 @@ function TimePicker({ date, onChange }: TimePickerProps) {
                   key={item}
                   className={
                     'size-[33px] rounded-full flex justify-center items-center group-hover:bg-gray-100 '
-                    + (item === currentValue ? '!bg-primary-dark text-white' : '')
+                    + (item === currentValue ? '!bg-input-border-focus text-white' : '')
                   }
                   onClick={() => handleTimeChange(type, item)}
                 >

package/components/partials/form/field.tsx

@@ -143,7 +143,9 @@ function getInputClasses({ error, Icon, iconPos, type }: { error: Error, Icon?:
     `block ${py} col-start-1 row-start-1 w-full rounded-md bg-white text-sm leading-[1.65] outline outline-1 -outline-offset-1 ` +
     'placeholder:text-input-placeholder focus:outline focus:outline-2 focus:-outline-offset-2 ' +
     (iconPos == 'right' && Icon ? `${pl} ${prWithIcon} ` : (Icon ? `${plWithIcon} ${pr} ` : `${pl} ${pr} `)) +
-    (error ? 'text-red-900 outline-danger focus:outline-danger ' : 'text-input outline-input-border focus:outline-primary ') + 
+    (error 
+      ? 'text-red-900 outline-danger focus:outline-danger ' 
+      : 'text-input outline-input-border focus:outline-input-border-focus ') + 
     (iconPos == 'right' ? 'justify-self-start ' : 'justify-self-end ') + 
     'nitro-input'
   )

package/components/partials/form/select.tsx

@@ -238,7 +238,7 @@ const selectStyles = {
   // Input container
   control: {
     base: 'rounded-md bg-white hover:cursor-pointer text-sm leading-[1.65] outline outline-1 -outline-offset-1 outline-input-border',
-    focus: 'outline-2 -outline-offset-2 outline-primary',
+    focus: 'outline-2 -outline-offset-2 outline-input-border-focus',
     error: 'outline-danger',
   },
   valueContainer: 'py-2 px-3 py-input-y px-input-x gap-1',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",

package/server/email/index.js

@@ -7,21 +7,21 @@ import inlineCss from 'inline-css'
 import { dirname, join } from 'path'
 import { fileURLToPath } from 'url'
 import path from 'path'
-import { getDirectories } from 'nitro-web/util'
+import { getDirectories, ucFirst } from 'nitro-web/util'
 
 let templates = {}
 let nodemailerMailgun = undefined
 const _dirname = dirname(fileURLToPath(import.meta.url)) + '/'
 
-export async function sendEmail({ template, to, bcc, data={}, from, replyTo, recipientVariables, subject, test, skipCssInline, config }) {
+export async function sendEmail({ template, to, bcc, data, from, replyTo, recipientVariables, subject, test, skipCssInline, config }) {
   /**
    * Email recipient a predefined template with data and/or recipientVariables
    *
    * @param {string} template = e.g. 'reset-password' or html
-   * @param {string} to - e.g. "Bruce Lee<bruce@gmail.com>, ..."
-   * @param {object} config - e.g. { mailgunKey, mailgunDomain, emailFrom, clientUrl }
+   * @param {string} to - e.g. "Bruce Wayne<bruce@wayneenterprises.com>, ..."
+   * @param {object} config - e.g. { mailgunKey, mailgunDomain, emailFrom, clientUrl, name }
    * @param {string} <bcc> - e.g. "Chuck Norris<chuck@gmail.com>" (not sent in development)
-   * @param {object} <data> - recipientVariables[to] shorthand
+   * @param {object} <data> - recipientVariables[to] shorthand, data is copied to all recipients
    * @param {string} <from> - e.g. "Chuck Norris<chuck@gmail.com>"
    * @param {string} <replyTo> - e.g. "Chuck Norris<chuck@gmail.com>"
    * @param {object} <recipientVariables> - mailgun recipient-variables for batch sending
@@ -32,8 +32,12 @@ export async function sendEmail({ template, to, bcc, data={}, from, replyTo, rec
    */
   if (!config) {
     throw new Error('sendEmail: `config` missing')
-  } else if (!config.emailFrom || !config.clientUrl) {
-    throw new Error('sendEmail: `config.emailFrom` or `config.clientUrl` is missing')
+  } else if (!config.emailFrom) {
+    throw new Error('sendEmail: `config.emailFrom` is missing')
+  } else if (!config.clientUrl) {
+    throw new Error('sendEmail: `config.clientUrl` is missing')
+  } else if (!config.name) {
+    throw new Error('sendEmail: `config.name` is missing')
   } else if (!test && (!config.mailgunKey || !config.mailgunDomain)) {
     throw new Error('sendEmail: `config.mailgunKey` or `config.mailgunDomain` is missing')
   } else if (!template) {
@@ -52,27 +56,30 @@ export async function sendEmail({ template, to, bcc, data={}, from, replyTo, rec
   // From, replayTo
   from = from || config.emailFrom
   replyTo = replyTo || config.emailReplyTo || from
-
-  // Data is recipientVariables[to] shorthand
-  if (data) {
-    recipientVariables = { [getNameEmail(to)[1]]: data }
-  }
+  const toSplit = to.split(',')
 
   // Add default recipientVariables
-  for (let toEmail in recipientVariables) {
+  if (!recipientVariables) recipientVariables = {}
+
+  // Add default values to recipientVariables
+  for (let toNameEmail of toSplit) {
+    const [toName, toEmail] = getNameEmail(toNameEmail)
     recipientVariables[toEmail] = {
+      ...(data || {}),
+      configName: ucFirst(config.name),
       domain: config.clientUrl,
-      email: toEmail,
-      greet: data.name || getNameEmail(to)[0]? 'Hi ' + (data.name || getNameEmail(to)[0]) : 'Hello',
-      name: getNameEmail(to)[0],
       replyToEmail: getNameEmail(replyTo)[1],
       replyToName: getNameEmail(replyTo)[0],
-      ...recipientVariables[toEmail],
+      email: toEmail,
+      greet: toName ? 'Hi ' + toName : 'Hello',
+      name: toName,
+      ...(recipientVariables[toEmail] || {}),
     }
   }
 
   let settings = {
     bcc: bcc,
+    emailTemplateDir: getDirectories(path, config.pwd).emailTemplateDir,
     from: from,
     isDev: config.clientUrl.match(/:/), // possibly use config.env here
     recipientVariables: recipientVariables,
@@ -83,7 +90,6 @@ export async function sendEmail({ template, to, bcc, data={}, from, replyTo, rec
     test: config.emailTestMode || test,
     to: to,
     url: config.clientUrl,
-    emailTemplateDir: getDirectories(path, config.pwd).emailTemplateDir,
   }
 
   // Grab html and send

package/server/email/partials/layout1.swig

@@ -31,7 +31,7 @@
                               <tr>
                                 <td width="180px" align="left">
                                   <a href="%recipient.domain%" target="_blank">
-                                    <img src="%recipient.domain%/assets/imgs/logo/logo-white.svg" width="auto" height="22" border="0">
+                                    <img src="%recipient.domain%/assets/imgs/logo/logo.svg" width="auto" height="22" border="0">
                                   </a>
                                 </td>
                                 <td align="right">

package/server/email/partials/vert-25.swig

@@ -2,7 +2,7 @@
 <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
   <tbody>
     <tr>
-      <td width="100%" height="28"></td>
+      <td width="100%" height="25"></td>
     </tr>
   </tbody>
 </table>

package/server/email/reset-password.html

@@ -1,4 +1,13 @@
+<!-- 
+  - You can view templates at http://localhost:3001/email/reset-password
+  - To modify the css, add your own /server/email/partials/email.css file
+  - You can copy any nitro email .swig/html template to your project, and modify it
+-->
+  
+<!-- extends references the default nitro layout file -->
 {% extends "partials/layout1.swig" %}
+
+<!-- block content is the content of the email -->
 {% block content %}
 
   [[ subject = Reset your Password ]]
@@ -15,7 +24,6 @@
   </span><br/>
   <br/>
   Thanks,<br/>
-  <b>The Nitro Team</b>
-
+  <b>The %recipient.configName% Team</b>
 
 {% endblock %}

package/server/email/welcome.html

@@ -1,10 +1,19 @@
+<!-- 
+  - You can view templates at http://localhost:3001/email/welcome
+  - To modify the css, add your own /server/email/partials/email.css file
+  - You can copy any nitro email .swig/html template to your project, and modify it
+-->
+
+<!-- extends references the default nitro layout file -->
 {% extends "partials/layout1.swig" %}
+
+<!-- block content is the content of the email -->
 {% block content %}
 
-  [[ subject = Welcome to Nitro ]]
+  [[ subject = Welcome to %recipient.configName% ]]
   <b>%recipient.greet%</b>,<br/>
   <br/>
-  Thanks for trying out Nitro! <br/>
+  Thanks for trying out %recipient.configName%! <br/>
   <br/>
   If you have any feature requests, feedback or questions, please don't hesitate to reach out to us at <a href="mailto:%recipient.replyToEmail%">%recipient.replyToEmail%</a>.<br/>
   <br/>
@@ -16,6 +25,6 @@
   </span><br/>
   <br/>
   Thanks,<br/>
-  <b>The Nitro Team</b>
+  <b>The %recipient.configName% Team</b>
 
 {% endblock %}

package/components/partials/form/toggle.tsx

@@ -1,54 +0,0 @@
-type ToggleProps = {
-  className?: string
-  id?: string
-  name: string
-  subtext?: string
-  text?: string
-  type?: 'checkbox'
-}
-
-export function Toggle({ name, id, subtext, text, type='checkbox', ...props }: ToggleProps) {
-  id = id || name
-  // https://tailwindui.com/components/application-ui/forms/checkboxes#component-744ed4fa65ba36b925701eb4da5c6e31
-  return (
-    <div className={`mt-2.5 mb-6 mt-input-before mb-input-after flex gap-3 nitro-toggle ${props.className || ''}`}>
-      <div className="flex h-6 shrink-0 items-center">
-        <div className="group grid size-4 grid-cols-1">
-          <input
-            {...props}
-            id={id}
-            name={name}
-            type={type}
-            className="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
-          />
-          <svg
-            fill="none"
-            viewBox="0 0 14 14"
-            className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
-          >
-            <path
-              d="M3 8L6 11L11 3.5"
-              strokeWidth={2}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="opacity-0 group-has-[:checked]:opacity-100"
-            />
-            <path
-              d="M3 7H11"
-              strokeWidth={2}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="opacity-0 group-has-[:indeterminate]:opacity-100"
-            />
-          </svg>
-        </div>
-      </div>
-      {text && <div className="text-sm/6">
-        <label for={id}>
-          <span className="font-medium text-gray-900">{text}</span>
-          <span className="ml-2 text-gray-500">{subtext}</span>
-        </label>
-      </div>}
-    </div>
-  )
-}