update event

aura-nw · Oct 8, 2024 · 5016e04 · 5016e04
1 parent cfba1b3
commit 5016e04
Show file tree

Hide file tree

Showing 35 changed files with 2,003 additions and 108 deletions.
diff --git a/public/assets/images/ava-thumb.png b/public/assets/images/ava-thumb.png
diff --git a/src/assets/fonts/Jaro-Regular.ttf b/src/assets/fonts/Jaro-Regular.ttf
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -619,7 +619,7 @@ export default function Header({ className }: { className?: string }) {
         </div>
 
         <div className='hidden lg:block absolute inset-x-0 top-0 w-full h-[100px]'>
-          <Image src={Bg} alt='' className='w-full h-full object-cover'/>
+          <Image src={Bg} alt='' className='w-full h-full object-cover' />
         </div>
         <nav
           className={`pk-container gap-3 lg:flex items-center justify-between h-[86px] hidden text-neautral-white relative`}
@@ -757,7 +757,11 @@ export default function Header({ className }: { className?: string }) {
                 {t('aboutUs')}
               </span>
             </div>
-            <Button size='sm' color='neautral' variant='outlined' onClick={() => window.open(config.ADMIN_URL, '_blank')}>
+            <Button
+              size='sm'
+              color='neautral'
+              variant='outlined'
+              onClick={() => window.open(config.ADMIN_URL, '_blank')}>
               Create Portal
             </Button>
             <div className='flex gap-[20px] ml-10 items-center cursor-pointer'>
@@ -775,7 +779,24 @@ export default function Header({ className }: { className?: string }) {
                     {/* <MainButton hasAvatar style='secondary' leadingIcon={account?.image || Avatar}>
                       {account?.name}
                     </MainButton> */}
-                    <Image src={account?.noncustodialWalletAddress ? UserGreen : User} alt='user' />
+                    <div className='relative p-0.5'>
+                      <div className='absolute inset-0 bg-[conic-gradient(#009640_70deg,#6D6D6D_0)] rounded-xl rotate-180'></div>
+                      <div className='border border-neautral-black p-[1px] bg-neutral-500 rounded-mlg relative'>
+                        <div className='border border-neutral-800 rounded-lg overflow-hidden'>
+                          <Image
+                            src={account?.image || UserGreen}
+                            width={50}
+                            height={50}
+                            className='w-12 h-w-12'
+                            alt='user'
+                          />
+                        </div>
+                      </div>
+                      <div className='absolute bottom-0 w-full font-jaro text-center text-stroke -mb-1'>
+                        <div className='text-base'>{account.level}</div>
+                        <div className='text-xs -mt-2'>LEVEL</div>
+                      </div>
+                    </div>
                   </DropdownToggle>
 
                   <DropdownMenu customClass='right-0 !w-[405px] max-w-[405px] !overflow-visible mt-[26px]'>

diff --git a/src/components/Input/TextField/index.tsx b/src/components/Input/TextField/index.tsx
@@ -9,6 +9,7 @@ interface ITextField {
   onChange?: (value: string) => void
   value?: string
   type?: string
+  id?: string
   inputref?: any
   disabled?: boolean
 }
@@ -26,6 +27,7 @@ export default function TextField({
   value,
   inputref,
   disabled,
+  id,
 }: ITextField) {
   const ex = ['e', '-', '=', '*', '(', ')', '+', '.']
   const disabledStyle = disabled ? 'bg-[#F6F6F6]' : ''
@@ -55,9 +57,10 @@ export default function TextField({
           onChange={(event) => {
             onChange && onChange(event.target.value)
           }}
-          id='input-group-1'
-          className={`bg-transparent rounded-[6px] w-full p-[13px] placeholder-medium-gray focus:outline-none ${leadingComponent ? 'pl-[50px]' : ''
-            } ${trailingComponent ? 'pr-[45px]' : ''} ${disabledStyle}`}
+          id={id || 'input-group-1'}
+          className={`bg-transparent rounded-[6px] w-full p-[13px] placeholder-medium-gray focus:outline-none ${
+            leadingComponent ? 'pl-[50px]' : ''
+          } ${trailingComponent ? 'pr-[45px]' : ''} ${disabledStyle}`}
           placeholder={placeholder}></input>
         {trailingComponent && (
           <div className='absolute inset-y-0 right-0 flex items-center justify-center p-[13px] max-w-[50px]'>
@@ -92,9 +95,10 @@ export default function TextField({
           type={type}
           disabled={disabled}
           onChange={(event) => onChange && onChange(event.target.value)}
-          id='input-group-1'
-          className={`rounded-[8px] text-sm leading-6 w-full px-[13px] py-[2px] placeholder-medium-gray focus:outline-none ${leadingComponent ? 'pl-10' : ''
-            } ${className} ${disabledStyle}`}
+          id={id || 'input-group-1'}
+          className={`rounded-[8px] text-sm leading-6 w-full px-[13px] py-[2px] placeholder-medium-gray focus:outline-none ${
+            leadingComponent ? 'pl-10' : ''
+          } ${className} ${disabledStyle}`}
           placeholder={placeholder}></input>
         {trailingComponent && (
           <div className='absolute inset-y-0 right-[10px] flex items-center justify-center p-[13px] max-w-[50px]'>
@@ -129,16 +133,18 @@ export default function TextField({
           type={type}
           disabled={disabled}
           onChange={(event) => onChange && onChange(event.target.value)}
-          id='input-group-1'
-          className={`rounded-[8px] text-xs leading-6 w-full px-[13px] placeholder-medium-gray focus:outline-none ${leadingComponent ? 'pl-10' : ''
-            } ${className} ${disabledStyle}`}
+          id={id || 'input-group-1'}
+          className={`rounded-[8px] text-xs leading-6 w-full px-[13px] placeholder-medium-gray focus:outline-none ${
+            leadingComponent ? 'pl-10' : ''
+          } ${className} ${disabledStyle}`}
           placeholder={placeholder}></input>
       </div>
     )
   }
 
   return (
-    <div className={`relative w-full flex rounded-lg border-[#D1D1D1] hover:border-black border h-10 ${className} ${disabledStyle}`}>
+    <div
+      className={`relative w-full flex rounded-lg border-border-secondary hover:border-black border h-10 ${className} ${disabledStyle}`}>
       {leadingComponent && (
         <div className='absolute inset-y-0 left-0 flex items-center justify-center py-2.5 pl-3 pr-1.5 w-[38px] [&>*]:w-5 [&>*]:h-5'>
           {leadingComponent}
@@ -160,9 +166,10 @@ export default function TextField({
         type={type}
         disabled={disabled}
         onChange={(event) => onChange && onChange(event.target.value)}
-        id='input-group-1'
-        className={`bg-transparent w-full placeholder-text-quatenary text-sm font-normal focus:outline-none ${leadingComponent ? 'pl-[38px]' : ''
-          } ${trailingComponent ? 'pr-[45px]' : ''} ${disabledStyle}`}
+        id={id || 'input-group-1'}
+        className={`bg-transparent w-full placeholder-text-quatenary px-2.5 text-sm font-normal focus:outline-none ${
+          leadingComponent ? 'pl-[38px]' : ''
+        } ${trailingComponent ? 'pr-[45px]' : ''} ${disabledStyle}`}
         placeholder={placeholder}></input>
       {trailingComponent && (
         <div className='absolute inset-y-0 right-0 flex items-center justify-center pr-3 pl-1.5 w-[38px] [&>*]:w-5 [&>*]:h-5'>
@@ -171,4 +178,4 @@ export default function TextField({
       )}
     </div>
   )
-}
+}
diff --git a/src/components/pages/event/artistic-voice-2024/Modal.tsx b/src/components/pages/event/artistic-voice-2024/Modal.tsx
@@ -0,0 +1,83 @@
+import { Dialog, Transition } from '@headlessui/react'
+import { Fragment, ReactNode, useRef } from 'react'
+
+export default function Modal({
+  open,
+  setOpen,
+  children,
+  className,
+  title,
+}: {
+  open: boolean
+  setOpen: (open: boolean) => void
+  children: ReactNode | JSX.Element
+  hideClose?: boolean
+  className?: string
+  title?: string
+}) {
+  const cancelButtonRef = useRef(null)
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog as='div' className={`relative z-50 ${className}`} initialFocus={cancelButtonRef} onClose={setOpen}>
+        <Transition.Child
+          as='div'
+          enter='ease-out duration-300'
+          enterFrom='opacity-0'
+          enterTo='opacity-70'
+          leave='ease-in duration-200'
+          leaveFrom='opacity-70'
+          leaveTo='opacity-0'>
+          <div className='fixed inset-0 bg-neutral-500/70 transition-opacity' />
+        </Transition.Child>
+
+        <div className='fixed inset-0 z-10 overflow-y-auto'>
+          <div className='flex min-h-full justify-center p-4 text-center items-center sm:p-0'>
+            <Transition.Child
+              as={Fragment}
+              enter='ease-out duration-300'
+              enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+              enterTo='opacity-100 translate-y-0 sm:scale-100'
+              leave='ease-in duration-200'
+              leaveFrom='opacity-100 translate-y-0 sm:scale-100'
+              leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'>
+              <Dialog.Panel className='static m-5 max-w-[547px] transform p-8 pt-4 text-white overflow-hidden rounded-2xl bg-neautral-700 text-left shadow-[0px_20px_60px_0px_rgba(0,0,0,0.20)] transition-all sm:my-8'>
+                <svg
+                  width='207'
+                  height='135'
+                  viewBox='0 0 207 135'
+                  fill='none'
+                  xmlns='http://www.w3.org/2000/svg'
+                  className='absolute top-0 right-0'>
+                  <path
+                    d='M53.3262 0H0L56.5685 67.5L0 135H53.3262L109.895 67.5L53.3262 0Z'
+                    fill='black'
+                    fillOpacity='0.1'
+                  />
+                  <path
+                    d='M149.484 0H96.1582L152.727 67.5L96.1582 135H149.484L206.053 67.5L149.484 0Z'
+                    fill='black'
+                    fillOpacity='0.1'
+                  />
+                </svg>
+                <div className='flex justify-end relative'>
+                  <svg
+                    width='24'
+                    height='24'
+                    viewBox='0 0 24 24'
+                    fill='none'
+                    xmlns='http://www.w3.org/2000/svg'
+                    onClick={() => setOpen(false)}
+                    className='cursor-pointer'>
+                    <path d='M16 8L8 16M16 16L8 8' stroke='white' stroke-width='1.5' stroke-linecap='round' />
+                  </svg>
+                </div>
+                <div className='text-lg font-semibold w-full text-center relative'>{title}</div>
+                <div className='mt-4 relative'>{children}</div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  )
+}