import React from 'react'
import SectionHeading from './Section-heading'
import { projectsData } from '@/libs/data'
import Image from 'next/image';

export default function Projects() {
  return (
    <section>
      <SectionHeading>
        My Projects
      </SectionHeading>
      <div>
        {projectsData.map((project, index)=>( 
          <React.Fragment key={index}>
            <Project  {...project} />
          </React.Fragment>
        ))}
      </div>
    </section>
  )
}

type ProjectProps = (typeof projectsData)[number]; 

function Project({title,description,tags,imageUrl } : 
ProjectProps) {
  return(
    <section className="group bg-gray-100 max-w-[42rem] border border-black/5
    overflow-hidden sm:pr-8 relative sm:h-[20rem] mb-3 sm:mb-8 last:mb-0 even:pl-8
    hover:bg-gray-200 transition">
      <div className='py-4 pb-7 px-5 sm:pl-10 sm:pr-2 sm:pt-10 sm:max-w-[50%] 
      flex flex-col h-full group-even:ml-[18rem]'>
        <h3 className='text-2xl font-semibold'>{title}</h3>
        <p className='mt-2 leading-relaxed text-gray-700'>{description}</p>
        <ul className='flex flex-wrap mt-4 gap-2 sm:mt-auto'>
          {tags.map((tag,index) => (
            <li className='bg-black/[0.7] px-3 py-1 text-[0.7rem] upppercase
            tracking-wider text-white rounded-full' 
            key={index}
            >
              {tag}
            </li>
          ))}
        </ul>
      </div>
      <Image 
        src={imageUrl} alt="Project I worked on" quality={95} 
        className='absolute top-8 -right-40 w-[28.25rem] rounded-t-lg shadow-2xl
        transition
        group-hover:scale-[1.05]
        group-hover:-translate-x-3
        group-hover:translate-y-3
        group-hover:-rotate-2

        group-even:group-hover:translate-x-3
        group-even:group-hover:-translate-y-3
        group-even:group-hover:rotate-2
        group-even:right-[inital] group-even:-left-40'
      />
    </section>
  )
}

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: "Username", type: "text", placeholder: "jsmith" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials, req) {
        // 这里添加你的认证逻辑
        const user = await authenticateUser(credentials.username, credentials.password)
        
        if (user) {
          // 返回的对象将被保存在 JWT 的 user 属性中
          return {
            id: user.id,
            username: user.username,
            // 不包含 email 字段
          }
        } else {
          return null
        }
      }
    })
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id
        token.username = user.username
      }
      return token
    },
    async session({ session, token }) {
      session.user = {
        id: token.id,
        username: token.username,
      }
      return session
    }
  },
  // 其他配置...
})

import "next-auth"

declare module "next-auth" {
  interface User {
    id: string
    username: string
  }

  interface Session {
    user: User
  }
}

declare module "next-auth/jwt" {
  interface JWT {
    id: string
    username: string
  }
}

import { NextResponse } from 'next/server';

export async function GET() {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
  ];
  return NextResponse.json(items, { status: 200 });
}

npx create-next-app@latest --example with-jest with-jest-app

npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

npm init jest@latest