Merge pull request #71 from Quest-Finder/develop

Develop
Quest-Finder · Mar 18, 2024 · c991c39 · c991c39
2 parents 6f2c2fc + 7e70239
commit c991c39
Show file tree

Hide file tree

Showing 53 changed files with 765 additions and 377 deletions.
diff --git a/components.json b/components.json
@@ -7,7 +7,7 @@
  "config": "tailwind.config.js",
  "css": "src/app/globals.css",
  "baseColor": "slate",
- "cssVariables": true,
+ "cssVariables": false,
  "preserveSymlinks": true
  },
  "aliases": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,11 +16,11 @@
  "@hookform/resolvers": "^3.3.4",
  "@radix-ui/react-alert-dialog": "^1.0.5",
  "@radix-ui/react-avatar": "^1.0.4",
- "@radix-ui/react-separator": "^1.0.3",
  "@radix-ui/react-dialog": "^1.0.5",
  "@radix-ui/react-label": "^2.0.2",
  "@radix-ui/react-radio-group": "^1.1.3",
  "@radix-ui/react-select": "^2.0.0",
+ "@radix-ui/react-separator": "^1.0.3",
  "@radix-ui/react-slot": "^1.0.2",
  "@types/node": "20.4.4",
  "@types/react": "18.2.15",
@@ -39,7 +39,7 @@
  "react": "^18.2.0",
  "react-day-picker": "^8.10.0",
  "react-dom": "^18.2.0",
- "react-hook-form": "^7.47.0",
+ "react-hook-form": "^7.50.1",
  "react-icons": "^4.10.1",
  "recharts": "^2.10.4",
  "tailwind-merge": "^2.2.1",

diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
@@ -5,16 +5,12 @@ export default function Home() {
  return (
  <main className='flex min-h-screen flex-col items-center justify-between p-24'>
  <div className='flex flex-col gap-3'>
- <Button>
- <Link href='/sign-in'>
- <span className='text-white'>sign-in</span>
- </Link>
- </Button>
- <Button>
- <Link href='/user/profile?show=profile'>
- <span className='text-white'>profile</span>
- </Link>
- </Button>
+ <Link href='/sign-in'>
+ <Button>sign-in</Button>
+ </Link>
+ <Link href='/user/profile?show=profile'>
+ <Button>profile</Button>
+ </Link>
  </div>
  </main>
  )

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,79 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
- :root {
- --background: 0 0% 100%;
- --foreground: 222.2 84% 4.9%;
-
- --card: 0 0% 100%;
- --card-foreground: 222.2 84% 4.9%;
-
- --popover: 0 0% 100%;
- --popover-foreground: 222.2 84% 4.9%;
-
- --primary: 222.2 47.4% 11.2%;
- --primary-foreground: 210 40% 98%;
-
- --secondary: 210 40% 96.1%;
- --secondary-foreground: 222.2 47.4% 11.2%;
-
- --muted: 210 40% 96.1%;
- --muted-foreground: 215.4 16.3% 46.9%;
-
- --accent: 210 40% 96.1%;
- --accent-foreground: 222.2 47.4% 11.2%;
-
- --destructive: 0 84.2% 60.2%;
- --destructive-foreground: 210 40% 98%;
-
- --border: 214.3 31.8% 91.4%;
- --input: 214.3 31.8% 91.4%;
- --ring: 222.2 84% 4.9%;
-
- --radius: 0.5rem;
- }
-
- .dark {
- --background: 222.2 84% 4.9%;
- --foreground: 210 40% 98%;
-
- --card: 222.2 84% 4.9%;
- --card-foreground: 210 40% 98%;
-
- --popover: 222.2 84% 4.9%;
- --popover-foreground: 210 40% 98%;
-
- --primary: 210 40% 98%;
- --primary-foreground: 222.2 47.4% 11.2%;
-
- --secondary: 217.2 32.6% 17.5%;
- --secondary-foreground: 210 40% 98%;
-
- --muted: 217.2 32.6% 17.5%;
- --muted-foreground: 215 20.2% 65.1%;
-
- --accent: 217.2 32.6% 17.5%;
- --accent-foreground: 210 40% 98%;
-
- --destructive: 0 62.8% 30.6%;
- --destructive-foreground: 210 40% 98%;
-
- --border: 217.2 32.6% 17.5%;
- --input: 217.2 32.6% 17.5%;
- --ring: 212.7 26.8% 83.9%;
- }
-}
-
-@layer base {
- * {
- @apply border-border;
- }
- body {
- @apply bg-background text-foreground;
- }
-}
-
 @layer base {
  .box-shadow-tooltip {
  box-shadow: 0px 2px 4px 0px rgba(30, 41, 59, 0.25);

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import { Metadata } from 'next'
-import { Inter, Roboto } from 'next/font/google'
+import { Inter, Roboto, Noto_Sans as NotoSans } from 'next/font/google'
 import { ClerkProvider } from '@clerk/nextjs'
 import { ptBR } from '@clerk/localizations'
 import './globals.css'
@@ -13,6 +13,11 @@ const roboto = Roboto({
  variable: '--font-roboto',
  weight: ['400'],
 })
+const notoSans = NotoSans({
+ subsets: ['latin'],
+ variable: '--font-notoSans',
+ weight: ['400'],
+})
 
 export const metadata: Metadata = {
  title: 'Tem Vaga Mestre',
@@ -28,7 +33,9 @@ export default function RootLayout({
  return (
  <html lang='pt-Br'>
  <ClerkProvider localization={ptBR}>
- <body className={`${inter.variable} ${roboto.variable}`}>
+ <body
+ className={`${inter.variable} ${roboto.variable} ${notoSans.variable}`}
+ >
  {children}
  </body>
  </ClerkProvider>

diff --git a/src/app/user/profile/page.tsx b/src/app/user/profile/page.tsx
@@ -1,13 +1,85 @@
-import { DesktopPage } from '@/features/page-profile/desktop/desktopPage'
-import { MobilePage } from '@/features/page-profile/desktop/mobile-page'
+'use client'
+
 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'
+import { useSearchParams } from 'next/navigation'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { CardWithImgs } from '@/features/page-profile/box-image'
+import { cn } from '@/lib/utils'
+import img from '../../../features/page-profile/header/assets/Rectangle.svg'
 
+const arrayImgsMock: string[] = [img, img, img, img, img]
 export default function Profile() {
+ const searchParams = useSearchParams()
+ type ShowElement = 'profile' | 'images' | 'dates' | null
+ const showElemnt: ShowElement = searchParams.get('show') as ShowElement
+
  return (
  <>
  <HeaderProfile />
- <DesktopPage />
- <MobilePage />
+ <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'>
+ <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')}>
+ <AvatarImage src='https://github.com/shadcn.png' />
+ <AvatarFallback>Profile</AvatarFallback>
+ </Avatar>
+ <UserDescriptionComponent
+ username='Lucas Marcelo'
+ nickname='mestremarcelo'
+ pronomes='Ele - Dele'
+ description='Mestre D&D com 15 anos de experiência'
+ localization='São Paulo | Brasil'
+ age='35 anos'
+ />
+ </div>
+ <div className='hidden flex-col gap-2 md:flex'>
+ <UserPreferenceCategorys
+ 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'>
+ <UserIntroductionComponent />
+ <CardWithImgs.Root>
+ <CardWithImgs.Text content='Titulo - imagens' />
+ <CardWithImgs.CardWithImg urlImgs={arrayImgsMock} />
+ </CardWithImgs.Root>
+ </main>
+ {/* 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>
+ </section>
  </>
  )
 }
diff --git a/src/components/icons/checkComponent.tsx b/src/components/icons/checkComponent.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+interface SvgComponentProps extends React.SVGProps<SVGSVGElement> {}
+export function CheckComponent({ ...props }: SvgComponentProps) {
+ return (
+ <svg
+ width={18}
+ height={13}
+ viewBox='0 0 18 13'
+ fill='none'
+ xmlns='http://www.w3.org/2000/svg'
+ {...props}
+ >
+ <path
+ d='M6.55 13L.85 7.3l1.425-1.425L6.55 10.15 15.725.975 17.15 2.4 6.55 13z'
+ fill='#095658'
+ />
+ </svg>
+ )
+}
diff --git a/src/components/icons/discord.tsx b/src/components/icons/discord.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+
+interface SvgComponentProps extends React.SVGProps<SVGSVGElement> {}
+
+function Discord({ ...props }: SvgComponentProps) {
+ return (
+ <svg
+ width={24}
+ height={19}
+ viewBox='0 0 24 19'
+ fill='none'
+ xmlns='http://www.w3.org/2000/svg'
+ {...props}
+ >
+ <path
+ d='M20.317 1.656A19.791 19.791 0 0015.432.141a.074.074 0 00-.079.037c-.21.375-.444.865-.608 1.25a18.271 18.271 0 00-5.487 0 12.643 12.643 0 00-.617-1.25.077.077 0 00-.079-.037 19.736 19.736 0 00-4.885 1.515.07.07 0 00-.032.028C.533 6.332-.32 10.866.099 15.344a.082.082 0 00.031.056 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994.021-.041.001-.09-.041-.106a13.109 13.109 0 01-1.872-.892.077.077 0 01-.008-.128c.126-.094.252-.192.372-.291a.074.074 0 01.078-.01c3.927 1.792 8.18 1.792 12.061 0a.074.074 0 01.079.009c.12.099.245.198.372.292.044.033.04.1-.006.128-.598.35-1.22.645-1.873.891a.077.077 0 00-.041.107c.36.698.772 1.363 1.225 1.993a.076.076 0 00.084.029 19.834 19.834 0 006.002-3.03.077.077 0 00.032-.055c.5-5.177-.838-9.674-3.549-13.66a.06.06 0 00-.031-.029zM8.02 12.617c-1.182 0-2.157-1.085-2.157-2.419 0-1.333.956-2.418 2.157-2.418 1.21 0 2.176 1.095 2.157 2.418 0 1.334-.956 2.42-2.157 2.42zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.418 2.157-2.418 1.21 0 2.176 1.095 2.157 2.418 0 1.334-.946 2.42-2.157 2.42z'
+ fill='#fff'
+ />
+ </svg>
+ )
+}
+
+export default Discord
diff --git a/src/components/icons/facebookIcon.tsx b/src/components/icons/facebookIcon.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+
+interface SvgComponentProps extends React.SVGProps<SVGSVGElement> {}
+
+function FacebookIcon({ ...props }: SvgComponentProps) {
+ return (
+ <svg
+ width={24}
+ height={24}
+ viewBox='0 0 24 24'
+ fill='none'
+ xmlns='http://www.w3.org/2000/svg'
+ {...props}
+ >
+ <path
+ d='M12 0C5.373 0 0 5.373 0 12c0 5.628 3.875 10.35 9.101 11.647v-7.98H6.627V12H9.1v-1.58c0-4.084 1.849-5.978 5.859-5.978.76 0 2.072.15 2.608.298v3.324c-.283-.03-.775-.044-1.386-.044-1.967 0-2.728.745-2.728 2.683V12h3.92l-.673 3.667h-3.247v8.245C19.396 23.195 24 18.135 24 12c0-6.627-5.373-12-12-12z'
+ fill='#fff'
+ />
+ </svg>
+ )
+}
+
+export default FacebookIcon
diff --git a/src/components/icons/instagram.tsx b/src/components/icons/instagram.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+interface SvgComponentProps extends React.SVGProps<SVGSVGElement> {}
+
+interface SvgComponentProps extends React.SVGProps<SVGSVGElement> {}
+export function InstagramIcon({ ...props }: SvgComponentProps) {
+ return (
+ <svg
+ width={24}
+ height={24}
+ viewBox='0 0 24 24'
+ fill='none'
+ xmlns='http://www.w3.org/2000/svg'
+ {...props}
+ >
+ <g
+ clipPath='url(#clip0_2973_7410)'
+ fill='#fff'
+ >
+ <path d='M12 2.16c3.206 0 3.586.015 4.847.071 1.172.052 1.805.249 2.226.413a3.71 3.71 0 011.379.895c.421.422.68.82.895 1.378.164.422.36 1.06.412 2.227.057 1.265.07 1.645.07 4.847 0 3.206-.013 3.586-.07 4.846-.051 1.172-.248 1.805-.412 2.227-.216.558-.478.961-.895 1.378a3.69 3.69 0 01-1.379.895c-.421.165-1.059.361-2.226.413-1.266.056-1.645.07-4.847.07-3.206 0-3.586-.014-4.847-.07-1.172-.052-1.805-.248-2.226-.413a3.71 3.71 0 01-1.379-.895 3.691 3.691 0 01-.895-1.378c-.164-.422-.36-1.06-.412-2.227-.057-1.265-.07-1.645-.07-4.846 0-3.207.013-3.586.07-4.847.051-1.172.248-1.805.412-2.227.216-.558.478-.96.895-1.378.422-.422.82-.68 1.379-.895.421-.164 1.059-.361 2.226-.413 1.261-.056 1.64-.07 4.847-.07zM12 0C8.742 0 8.334.014 7.055.07 5.78.127 4.903.333 4.144.628a5.857 5.857 0 00-2.128 1.388A5.88 5.88 0 00.628 4.139C.333 4.903.127 5.775.07 7.05.014 8.334 0 8.742 0 12s.014 3.666.07 4.945c.057 1.275.263 2.152.558 2.911.31.792.717 1.463 1.388 2.128a5.866 5.866 0 002.123 1.383c.764.296 1.636.502 2.911.558 1.28.056 1.688.07 4.945.07 3.258 0 3.666-.014 4.946-.07 1.275-.056 2.151-.262 2.91-.558a5.866 5.866 0 002.124-1.383 5.866 5.866 0 001.383-2.123c.295-.764.501-1.636.558-2.911.056-1.28.07-1.688.07-4.945 0-3.258-.014-3.666-.07-4.946-.057-1.275-.263-2.151-.558-2.91a5.62 5.62 0 00-1.374-2.133A5.866 5.866 0 0019.861.633C19.097.338 18.225.13 16.95.075 15.666.015 15.258 0 12 0z' />
+ <path d='M12 5.836A6.166 6.166 0 005.836 12 6.166 6.166 0 0012 18.164 6.166 6.166 0 0018.164 12 6.166 6.166 0 0012 5.836zm0 10.162A3.999 3.999 0 1112.001 8 3.999 3.999 0 0112 15.998zM19.847 5.592a1.44 1.44 0 11-2.879 0 1.44 1.44 0 012.879 0z' />
+ </g>
+ <defs>
+ <clipPath id='clip0_2973_7410'>
+ <path
+ fill='#fff'
+ d='M0 0H24V24H0z'
+ />
+ </clipPath>
+ </defs>
+ </svg>
+ )
+}