update

aura-nw · Jul 28, 2023 · 95f763f · 95f763f
1 parent 1be00e2
commit 95f763f
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 25 deletions.
diff --git a/src/components/Select/FilledSelect/index.tsx b/src/components/Select/FilledSelect/index.tsx
@@ -54,7 +54,7 @@ export default function FilledSelect({
                   {!!selected.length ? (
                     isTooLong ? (
                       <span className='block truncate text-medium-gray'>
-                        {selected.map((s) => s.value).length} gernes selected
+                        {selected.map((s) => s.value).length} genres selected
                       </span>
                     ) : (
                       <span className='block truncate text-medium-gray'>{selected.map((s) => s.value).join(', ')}</span>

diff --git a/src/components/pages/chapter/comicDetail.tsx b/src/components/pages/chapter/comicDetail.tsx
@@ -156,7 +156,7 @@ export default function ComicDetail({
                 <strong>{data.views?.toLocaleString('en-US')}</strong> views •{' '}
                 <strong>{comicLikes?.toLocaleString('en-US')}</strong> likes
               </p>
-              <div className={`2xl:flex-row flex-col flex gap-[10px]`}>
+              <div className={`2xl:flex-row 2xl:items-start flex-col flex gap-[10px]`}>
                 {isSubscribe ? (
                   <FilledButton>
                     <div onClick={() => subscribeHandler(false)} className='h-5 flex items-center'>
@@ -251,7 +251,7 @@ export default function ComicDetail({
                 <strong className='text-[16px]'>{`${data.chapters.length} chapter${
                   data.chapters.length > 1 ? 's' : ''
                 }`}</strong>
-                <div className='flex gap-7'>
+                <div className='flex gap-3 2xl:gap-5'>
                   <span title='Only digits'>
                     <TextField
                       onChange={setSearchChapter}
@@ -264,7 +264,7 @@ export default function ComicDetail({
                   </span>
                   <div
                     className={`${
-                      expandDetail ? 'max-w-[200px] opacity-100' : 'max-w-0 overflow-hidden opacity-0'
+                      expandDetail ? 'max-w-[180px] opacity-100' : 'max-w-0 overflow-hidden opacity-0'
                     } transition-all`}>
                     <FilledSelect
                       icon={<ChevronDownIcon className='h-5 w-5 text-medium-gray' aria-hidden='true' />}
@@ -294,10 +294,10 @@ export default function ComicDetail({
                   </div>
                   <div
                     className={`${
-                      expandDetail ? 'max-w-[200px] opacity-100' : 'max-w-0 overflow-hidden opacity-0'
-                    } transition-all`}>
-                    <button className='flex gap-6 items-center bg-[#f2f2f2] rounded-full py-[3px] px-[13px]'>
-                      <div className='text-base leading-6 text-medium-gray' onClick={() => setIsDesc(!isDesc)}>
+                      expandDetail ? 'max-w-[180px] opacity-100' : 'max-w-0 overflow-hidden opacity-0'
+                    } transition-all flex items-center`}>
+                    <button className='hidden 2xl:flex gap-3 items-center bg-[#f2f2f2] rounded-full py-[3px] px-[13px]'>
+                      <div className='text-base leading-6 text-medium-gray truncate' onClick={() => setIsDesc(!isDesc)}>
                         {isDesc ? 'Sort by newest' : 'Sort by oldest'}
                       </div>
                       <Image
@@ -307,6 +307,12 @@ export default function ComicDetail({
                         className='cursor-pointer w-6 h-w-6'
                       />
                     </button>
+                    <Image
+                      alt=''
+                      src={ArrowSwapIcon}
+                      onClick={() => setIsDesc(!isDesc)}
+                      className='cursor-pointer w-6 h-w-6 text-light-gray 2xl:hidden'
+                    />
                   </div>
                 </div>
               </div>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -38,10 +38,10 @@ export default function Home() {
       value: 'All status',
     },
   ])
-  const [gerneFilter, setgerneFilter] = useState([
+  const [genreFilter, setgenreFilter] = useState([
     {
-      key: 'All gernes',
-      value: 'All gernes',
+      key: 'All genres',
+      value: 'All genres',
     },
   ])
 
@@ -78,16 +78,16 @@ export default function Home() {
               <div className='md:flex hidden gap-[20px] items-center'>
                 <FilledSelect
                   icon={<ChevronDownIcon className='h-5 w-5 text-medium-gray' aria-hidden='true' />}
-                  selected={gerneFilter}
+                  selected={genreFilter}
                   multiple={true}
-                  onChange={setgerneFilter}
-                  allKey='All gernes'
+                  onChange={setgenreFilter}
+                  allKey='All genres'
                   options={
                     allTags?.data
                       ? [
                           {
-                            key: 'All gernes',
-                            value: 'All gernes',
+                            key: 'All genres',
+                            value: 'All genres',
                           },
                           ...allTags?.data?.map((tag) => ({
                             key: tag[locale],
@@ -96,12 +96,12 @@ export default function Home() {
                         ]
                       : [
                           {
-                            key: 'All gernes',
-                            value: 'All gernes',
+                            key: 'All genres',
+                            value: 'All genres',
                           },
                         ]
                   }
-                  placeholder='All gernes'
+                  placeholder='All genres'
                 />
                 <FilledSelect
                   multiple={true}
@@ -143,8 +143,8 @@ export default function Home() {
                         : true
                     )
                     .filter((data) =>
-                      gerneFilter.length && !gerneFilter.some((s) => s.key == 'All gernes')
-                        ? gerneFilter.some((filter) => data.tags?.some((tag) => tag[locale] == filter.key))
+                      genreFilter.length && !genreFilter.some((s) => s.key == 'All genres')
+                        ? genreFilter.some((filter) => data.tags?.some((tag) => tag[locale] == filter.key))
                         : true
                     )
                     .slice(0, 6)

diff --git a/src/pages/profile/profile.tsx b/src/pages/profile/profile.tsx
@@ -211,10 +211,6 @@ export default function Profile({ profile, subscribeList, unsubscribe, subscribe
                             key: 'Female',
                             value: 'Female',
                           },
-                          {
-                            key: 'Undisclosed',
-                            value: 'Undisclosed',
-                          },
                         ]}
                       />
                     </div>