feat: updates

packages/web/components/New/Topbar/Avatar.tsx

@@ -0,0 +1,41 @@
+import { css, cx } from '@emotion/css'
+import { useNavigate } from 'react-router-dom'
+import Icon from '../../Icon'
+import { resizeImage } from '@/web/utils/common'
+import useUser from '@/web/api/hooks/useUser'
+
+const Avatar = ({ className }: { className?: string }) => {
+  const navigate = useNavigate()
+  const { data: user } = useUser()
+
+  const avatarUrl = user?.profile?.avatarUrl
+    ? resizeImage(user?.profile?.avatarUrl ?? '', 'sm')
+    : ''
+
+  return (
+    <>
+      {avatarUrl ? (
+        <img
+          src={avatarUrl}
+          onClick={() => navigate('/login')}
+          className={cx(
+            'app-region-no-drag rounded-full',
+            className || 'h-12 w-12'
+          )}
+        />
+      ) : (
+        <div
+          onClick={() => navigate('/login')}
+          className={cx(
+            'rounded-full bg-day-600 p-2.5 dark:bg-night-600',
+            className || 'h-12 w-12'
+          )}
+        >
+          <Icon name='user' className='h-7 w-7 text-neutral-500' />
+        </div>
+      )}
+    </>
+  )
+}
+
+export default Avatar

packages/web/components/New/Topbar/NavigationButtons.tsx

@@ -0,0 +1,45 @@
+import { css, cx } from '@emotion/css'
+import { motion, useAnimation } from 'framer-motion'
+import { useNavigate } from 'react-router-dom'
+import { ease } from '@/web/utils/const'
+import Icon from '../../Icon'
+
+const NavigationButtons = () => {
+  const navigate = useNavigate()
+  const controlsBack = useAnimation()
+  const controlsForward = useAnimation()
+  const transition = { duration: 0.18, ease }
+
+  return (
+    <>
+      <button
+        onClick={() => navigate(-1)}
+        onMouseDown={async () => {
+          await controlsBack.start({ x: -5 })
+          await controlsBack.start({ x: 0 })
+        }}
+        className='app-region-no-drag rounded-full bg-day-600 p-2.5 dark:bg-night-600'
+      >
+        <motion.div animate={controlsBack} transition={transition}>
+          <Icon name='back' className='h-7 w-7 text-neutral-500' />
+        </motion.div>
+      </button>
+      <button
+        onClick={async () => {
+          navigate(1)
+        }}
+        onMouseDown={async () => {
+          await controlsForward.start({ x: 5 })
+          await controlsForward.start({ x: 0 })
+        }}
+        className='app-region-no-drag ml-2.5 rounded-full bg-day-600 p-2.5 dark:bg-night-600'
+      >
+        <motion.div animate={controlsForward} transition={transition}>
+          <Icon name='forward' className='h-7 w-7 text-neutral-500' />
+        </motion.div>
+      </button>
+    </>
+  )
+}
+
+export default NavigationButtons

packages/web/components/New/Topbar/SearchBox.tsx

@@ -0,0 +1,16 @@
+import { css, cx } from '@emotion/css'
+import Icon from '../../Icon'
+
+const SearchBox = () => {
+  return (
+    <div className='app-region-no-drag flex items-center rounded-full bg-day-600 p-2.5 text-neutral-500 dark:bg-night-600 lg:min-w-[284px]'>
+      <Icon name='search' className='mr-2.5 h-7 w-7' />
+      <input
+        placeholder='Artist, songs and more'
+        className='bg-transparent font-medium  placeholder:text-neutral-500 dark:text-neutral-200'
+      />
+    </div>
+  )
+}
+
+export default SearchBox

packages/web/components/New/Topbar/SettingsButton.tsx

@@ -0,0 +1,11 @@
+import Icon from '@/web/components/Icon'
+
+const SettingsButton = () => {
+  return (
+    <button className='app-region-no-drag rounded-full bg-day-600 p-2.5 dark:bg-night-600'>
+      <Icon name='placeholder' className='h-7 w-7 text-neutral-500' />
+    </button>
+  )
+}
+
+export default SettingsButton

packages/web/components/New/Topbar/TopbarDesktop.tsx

@@ -0,0 +1,42 @@
+import { css, cx } from '@emotion/css'
+import { useLocation } from 'react-router-dom'
+import Avatar from './Avatar'
+import SearchBox from './SearchBox'
+import SettingsButton from './SettingsButton'
+import NavigationButtons from './NavigationButtons'
+
+const TopbarDesktop = () => {
+  const location = useLocation()
+
+  return (
+    <div
+      className={cx(
+        'app-region-drag fixed top-0 right-0 z-20 flex items-center justify-between overflow-hidden rounded-tr-24 pt-11 pb-10 pr-6 pl-10 ',
+        css`
+          left: 104px;
+        `,
+        !location.pathname.startsWith('/album/') &&
+          !location.pathname.startsWith('/playlist/') &&
+          'bg-gradient-to-b from-white dark:from-black'
+      )}
+    >
+      {/* Left Part */}
+      <div className='flex items-center'>
+        <NavigationButtons />
+
+        {/* Dividing line */}
+        <div className='mx-6 h-4 w-px bg-black/20 dark:bg-white/20'></div>
+
+        <SearchBox />
+      </div>
+
+      {/* Right Part */}
+      <div className='flex'>
+        <SettingsButton />
+        <Avatar className='ml-3 h-12 w-12' />
+      </div>
+    </div>
+  )
+}
+
+export default TopbarDesktop

packages/web/components/New/Topbar/TopbarMobile.tsx

@@ -0,0 +1,22 @@
+import Avatar from './Avatar'
+import SearchBox from './SearchBox'
+import SettingsButton from './SettingsButton'
+
+const TopbarMobile = () => {
+  return (
+    <div className='mb-5 mt-7 flex'>
+      <div className='flex-grow'>
+        <SearchBox />
+      </div>
+
+      <div className='ml-6 flex'>
+        <SettingsButton />
+        <div className='ml-3'>
+          <Avatar />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TopbarMobile