Merge pull request #73 from Quest-Finder/develop

Alterações fix/pageContent

src/app/user/profile/page.tsx

@@ -3,7 +3,6 @@
 import { HeaderProfile } from '@/features/page-profile/header/header'
 import { UserIntroductionComponent } from '@/features/page-profile/introduction/UserIntroduction'
 import { userMock } from '@/features/page-profile/mocks/mock'
-import { PlayerProfileSection } from '@/features/page-profile/playerProfileSection/PlayerProfileSection'
 import { SelectPage } from '@/features/page-profile/select-page/selectPage'
 import UserDescriptionComponent from '@/features/page-profile/user-description/user-description'
 import UserPreferenceCategorys from '@/features/page-profile/user-preference/userPreferences'
@@ -22,7 +21,7 @@ export default function Profile() {
  return (
  <>
  <HeaderProfile />
- <section className='mx-auto mt-4 grid min-h-screen max-w-[1440px] grid-cols-1 gap-2 px-3 pb-5 md:grid-cols-12 md:grid-rows-none'>
+ <div className='mx-auto mt-4 grid min-h-screen max-w-[90rem] grid-cols-1 px-6 pb-5 md:grid-cols-12 md:grid-rows-none md:space-x-14 md:px-[4.844rem]'>
  <aside className='-mt-24 flex flex-col gap-8 md:col-span-4'>
  <div className=' flex flex-col items-center justify-start gap-2'>
  <Avatar className={cn(' flex h-36 w-36')}>
@@ -43,43 +42,36 @@ export default function Profile() {
  rpgStyle={userMock.preferences.rpgStyles}
  badges={userMock.badges}
  />
- <PlayerProfileSection />
  </div>
  </aside>
- <main className='hidden  flex-col gap-2 md:col-span-7 md:col-start-5 md:flex'>
+ <section className='hidden flex-col gap-2 md:col-span-8 md:col-start-5 md:flex'>
  <UserIntroductionComponent />
  <CardWithImgs.Root>
  <CardWithImgs.Text content='Titulo - imagens' />
  <CardWithImgs.CardWithImg urlImgs={arrayImgsMock} />
  </CardWithImgs.Root>
- </main>
+ </section>
  {/* mobile */}
- <div className='min-h-screen md:hidden'>
- <aside>
- <SelectPage />
- </aside>
- <main className='col-span-12 flex items-center justify-center'>
- <div className='flex w-full max-w-[400px] flex-col items-center justify-center'>
- {showElemnt === 'profile' && (
- <div className='flex w-full flex-col gap-8'>
- <UserIntroductionComponent />
- <UserPreferenceCategorys
- rpgStyle={userMock.preferences.rpgStyles}
- badges={userMock.badges}
- />
- </div>
- )}
- {showElemnt === 'profile' && <PlayerProfileSection />}
- {showElemnt === 'images' && (
- <CardWithImgs.Root>
- <CardWithImgs.Text content='Titulo - imagens' />
- <CardWithImgs.CardWithImg urlImgs={arrayImgsMock} />
- </CardWithImgs.Root>
- )}
- </div>
- </main>
+ <div className='mx-auto mt-8 flex min-h-screen w-full max-w-[28.125rem] flex-col gap-8 md:mt-0 md:hidden'>
+ <SelectPage />
+
+ {showElemnt === 'profile' && (
+ <>
+ <UserIntroductionComponent />
+ <UserPreferenceCategorys
+ rpgStyle={userMock.preferences.rpgStyles}
+ badges={userMock.badges}
+ />
+ </>
+ )}
+ {showElemnt === 'images' && (
+ <CardWithImgs.Root>
+ <CardWithImgs.Text content='Titulo - imagens' />
+ <CardWithImgs.CardWithImg urlImgs={arrayImgsMock} />
+ </CardWithImgs.Root>
+ )}
  </div>
- </section>
+ </div>
  </>
  )
 }

src/components/ui/card.tsx

@@ -7,7 +7,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
  <div
  ref={ref}
  className={cn(
- 'bg-card text-card-foreground rounded-lg border shadow-sm',
+ 'rounded-2xl border border-neutral-100 bg-neutral-50 text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50',
  className,
  )}
  {...props}
@@ -53,7 +53,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <p
  ref={ref}
- className={cn('text-muted-foreground text-sm', className)}
+ className={cn('text-sm text-slate-500 dark:text-slate-400', className)}
  {...props}
  />
 ))

src/features/page-profile/box-image/components/cardWithImage.tsx

@@ -8,12 +8,10 @@ interface CardWithImgProps {
 }
 export function CardWithImg({ urlImgs }: CardWithImgProps) {
  return (
- <Card
- key={new Date().getTime().toString()}
- className='flex w-full items-center justify-center gap-4 overflow-x-auto rounded-xl border-none pl-[68%]'
- >
+ <Card className='flex w-full items-center justify-center gap-4 overflow-x-auto rounded-xl border-none pl-[68%]'>
  {urlImgs.map(url => (
  <Image
+ key={new Date().getTime() * Math.random()}
  src={url}
  alt=''
  width={259}

src/features/page-profile/box-image/components/text.tsx

@@ -10,7 +10,7 @@ export function Text({ content, as: Component = 'p', className }: TextProps) {
  return (
  <Component
  className={cn(
- 'color-neutral-950 pl-2 text-lg font-semibold leading-7',
+ 'text-2xl font-semibold leading-10 text-neutral-950 md:leading-8',
  className,
  )}
  >

src/features/page-profile/introduction/UserIntroduction.tsx

@@ -4,29 +4,13 @@ import { UserIntroductionMock } from './mock'
 
 export function UserIntroductionComponent() {
  return (
- <>
- <UserIntroduction.SectionTitle
- title='Bio'
- className=' block sm:hidden'
- />
- <Card className='flex flex-col rounded-xl border-[1px] px-10 py-6 sm:px-6 sm:pt-4 '>
- {/* <UserIntroduction.UserTitle
- userName={UserIntroductionMock.user.first_name}
- userNickname={UserIntroductionMock.user.nickname}
- userRole={UserIntroductionMock.user.role}
- /> */}
- {/* <Separator className='hidden sm:block' /> */}
- {/* <UserIntroduction.Quote text={UserIntroductionMock.user.info.quote} /> */}
- <UserIntroduction.Section>
- <UserIntroduction.SectionTitle
- title='Bio'
- className='hidden sm:block'
- />
- <UserIntroduction.Bio
- description={UserIntroductionMock.user.info.bio}
- />
- </UserIntroduction.Section>
+ <UserIntroduction.Section>
+ <UserIntroduction.SectionTitle title='Bio' />
+ <Card className='flex flex-col gap-4 px-4 py-6'>
+ <UserIntroduction.Bio
+ description={UserIntroductionMock.user.info.bio}
+ />
  </Card>
- </>
+ </UserIntroduction.Section>
  )
 }

src/features/page-profile/introduction/components/UserBio.tsx

@@ -2,12 +2,14 @@
 
 import { useEffect, useRef, useState } from 'react'
 import { Button } from '@/components/ui/button'
+import { useResize } from '../hooks/useResize'
 
 interface UserBioProps {
  description: string
 }
 
 export function UserBio({ description }: UserBioProps) {
+ const { width } = useResize()
  const truncatedTextRef = useRef<HTMLParagraphElement | null>(null)
  const [showMore, setShowMore] = useState(false)
  const [truncateText, setTruncateText] = useState(true)
@@ -16,28 +18,26 @@ export function UserBio({ description }: UserBioProps) {
  const text = truncatedTextRef.current
  if (text && text.offsetHeight < text.scrollHeight) {
  setShowMore(true)
+ } else {
+ setShowMore(false)
  }
- }, [])
+ }, [width])
 
  return (
  <>
  <p
  ref={truncatedTextRef}
  className={`${
  truncateText ? 'truncated-text ' : ''
- } text-sm leading-6 text-neutral-500 sm:text-xl`}
+ } font-notoSans text-sm leading-6 text-neutral-400 sm:text-base`}
  >
- {description.length === 0 || description === '' ? (
- <span className='block text-center'>Nenhuma bio cadastrada</span>
- ) : (
- description
- )}
+ {description}
  </p>
  {showMore && (
  <Button
  onClick={() => setTruncateText(!truncateText)}
  variant='ghost'
- className='my-[9px] ml-auto h-auto max-w-max p-0 text-base font-medium leading-none text-neutral-950 hover:bg-transparent'
+ className='my-[5px] h-auto justify-end p-0 font-notoSans text-base font-semibold text-neutral-950 hover:bg-transparent'
  >
  {truncateText ? 'Ver mais' : 'Ver menos'}
  </Button>

src/features/page-profile/introduction/components/UserSection.tsx

@@ -3,5 +3,5 @@ interface UserSectionProps {
 }
 
 export function UserSection({ children }: UserSectionProps) {
- return <section className='mt-6 flex flex-col gap-4'>{children}</section>
+ return <section className='space-y-4 md:mt-[3.25rem]'>{children}</section>
 }

src/features/page-profile/introduction/components/UserSectionTitle.tsx

@@ -1,13 +1,19 @@
-import { cva } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 interface UserSectionTitleProps
  extends React.HtmlHTMLAttributes<HTMLHeadingElement> {
  title: string
 }
 
-const Title = cva('text-2xl text-neutral-950 h-10 leading-[3rem] sm:h-8 w-full')
-
 export function UserSectionTitle({ title, className }: UserSectionTitleProps) {
- return <h2 className={cn(Title({ className }))}>{title}</h2>
+ return (
+ <h2
+ className={cn(
+ 'w-full font-notoSans text-2xl font-semibold leading-10 text-neutral-950 md:leading-8',
+ className,
+ )}
+ >
+ {title}
+ </h2>
+ )
 }

src/features/page-profile/introduction/helpers/resizeDelay.ts

@@ -0,0 +1,12 @@
+export const resizeDelay = (func: () => void, milliseconds?: number) => {
+ const time = milliseconds || 400
+ let timer: number
+
+ return (event: Event): void => {
+ if (timer) {
+ clearTimeout(timer)
+ }
+
+ timer = setTimeout(func, time, event)
+ }
+}

src/features/page-profile/introduction/hooks/useResize.tsx

@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react'
+import { resizeDelay } from '../helpers/resizeDelay'
+
+export function useResize() {
+ const [size, setSize] = useState([window.innerWidth, window.innerHeight])
+
+ useEffect(() => {
+ const resize = resizeDelay(() => {
+ setSize([window.innerWidth, window.innerHeight])
+ })
+
+ window.addEventListener('resize', resize)
+
+ return () => {
+ window.removeEventListener('resize', resize)
+ }
+ }, [])
+
+ return { width: size[0], height: size[1] }
+}

src/features/page-profile/introduction/introduction.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { Separator } from '@/components/ui/separator'
 import { Card } from '@/components/ui/card'
 import { UserIntroduction } from '.'
 import { UserIntroductionMock } from './mock'
@@ -19,49 +18,15 @@ export default meta
 
 type Story = StoryObj<typeof UserIntroduction>
 
-export const FullIntroduction: Story = {
+export const Introduction: Story = {
  render: () => (
- <>
- <UserIntroduction.SectionTitle
- title='Bio'
- className='mb-4 block sm:hidden'
- />
- <Card className='flex max-w-[862px] flex-col rounded-xl border-[1px] px-4 py-6 sm:px-6 sm:pt-4'>
- <UserIntroduction.UserTitle
- userName={UserIntroductionMock.user.first_name}
- userNickname={UserIntroductionMock.user.nickname}
- userRole={UserIntroductionMock.user.role}
- />
- <Separator className='hidden sm:block' />
- <UserIntroduction.Quote text={UserIntroductionMock.user.info.quote} />
- <UserIntroduction.Section>
- <UserIntroduction.SectionTitle
- title='Bio'
- className='hidden sm:block'
- />
- <UserIntroduction.Bio
- description={UserIntroductionMock.user.info.bio}
- />
- </UserIntroduction.Section>
- </Card>
- </>
- ),
-}
-
-export const MissingIntroduction: Story = {
- render: () => (
- <Card className='flex max-w-[862px] flex-col rounded-xl border-[1px] px-4 py-6 sm:px-6 sm:pt-4'>
- <UserIntroduction.UserTitle
- userName={UserIntroductionMock.user.first_name}
- userRole='Jogador'
- />
- <Separator className='hidden sm:block' />
- <UserIntroduction.Section>
- <UserIntroduction.SectionTitle title='Bio' />
+ <UserIntroduction.Section>
+ <UserIntroduction.SectionTitle title='Bio' />
+ <Card className='flex flex-col gap-4 rounded-2xl border-neutral-200 px-4 py-6'>
  <UserIntroduction.Bio
  description={UserIntroductionMock.user.info.bio}
  />
- </UserIntroduction.Section>
- </Card>
+ </Card>
+ </UserIntroduction.Section>
  ),
 }

src/features/page-profile/select-page/selectPage.tsx

@@ -6,15 +6,15 @@ import { useSelectPage } from './useSelectPage'
 export function SelectPage() {
  const { handleSetParams, params, linksWithPath } = useSelectPage()
  return (
- <ul className='mx-auto my-3 flex min-h-[43px] w-full max-w-[450px] flex-wrap items-center justify-center gap-3 rounded-md bg-[#EFEFEF] p-2'>
+ <ul className='mx-auto flex min-h-[43px] w-full flex-wrap items-center justify-center gap-3 rounded-md bg-neutral-100 p-2'>
  {linksWithPath.map(({ path, text }) => {
- const bgBLink = params === text && 'bg-[#FFFFFF]'
+ const bgBLink = params === text && 'bg-neutral-50'
  const bgText =
- params === text ? 'text-black font-extrabold' : 'text-[#989898] '
+ params === text ? 'text-black font-extrabold' : 'text-neutral-400 '
  return (
  <li
  key={text}
- className={` flex items-center rounded-md px-4 py-2 ${bgBLink} w-[50px] min-w-[100px]`}
+ className={` flex items-center rounded-md px-4 py-2 font-notoSans ${bgBLink} w-[50px] min-w-[100px]`}
  >
  <Link
  href={path}

src/features/page-profile/user-description/components/Root.tsx

@@ -5,7 +5,7 @@ interface RootPros {
 }
 export function Root({ children }: RootPros) {
  return (
- <section className='inline-flex w-full flex-col items-center justify-center gap-8 border-none'>
+ <section className='inline-flex w-full flex-col items-center justify-center gap-8'>
  {children}
  </section>
  )

src/features/page-profile/user-description/components/boxWithIcons.tsx

@@ -18,8 +18,8 @@ export function BoxWithIcons() {
  {socialMedia.map(icon => {
  const IconName = icon
  return (
- <button>
- <IconName className='h-10  w-10 cursor-pointer items-center justify-center gap-2 rounded-md bg-neutral-950 p-2 transition-all transition-all delay-75 hover:bg-neutral-900' />
+ <button key={new Date().getTime() * Math.random()}>
+ <IconName className='h-10 w-10 cursor-pointer items-center justify-center gap-2 rounded-md bg-neutral-950 p-2 transition-all delay-75 hover:bg-neutral-900' />
  </button>
  )
  })}

src/features/page-profile/user-description/components/typograph.tsx

@@ -14,7 +14,7 @@ export function Typography({
  return (
  <Component
  className={cn(
- 'bg-card text-card-foreground rounded-lg border border-none text-center font-notoSans text-xl font-semibold leading-normal',
+ 'text-center font-notoSans text-xl font-semibold leading-normal',
  className,
  )}
  >