✨ adicionando a pagina de artigos mockada

Author: PaoloProdossimoLopes

next.config.js

@@ -1,4 +1,15 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'images.unsplash.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
+}
 
 module.exports = nextConfig

package-lock.json

@@ -12,24 +12,29 @@
     "test:2e2-report": "npx playwright show-report"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.6.0",
     "@next/font": "^13.4.1",
     "@types/node": "20.1.0",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
     "autoprefixer": "10.4.14",
     "eslint": "8.40.0",
     "eslint-config-next": "13.4.1",
+    "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.383.0",
     "next": "13.4.1",
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.52.0",
     "react-icons": "^4.8.0",
     "tailwindcss": "3.3.2",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@playwright/test": "^1.44.1",
-    "@rocketseat/eslint-config": "^1.2.0"
+    "@rocketseat/eslint-config": "^1.2.0",
+    "@types/lodash.debounce": "^4.0.9"
   }
 }

package.json

@@ -0,0 +1,9 @@
+export interface Article {
+  id: string
+  imageUrl: string
+  title: string
+  slug: string
+  excerpt: string
+  author: string
+  createdAt: string
+}

src/app/artigos/Article.ts

@@ -0,0 +1,25 @@
+import Image from 'next/image'
+import { Article } from './Article'
+
+interface ArticleCardProps {
+  article: Article
+}
+
+export function ArticleCard(props: ArticleCardProps) {
+  return (
+    <div className="cursor-pointer col-span-1 hover:bg-gray-700 transition-all p-2 rounded-lg hover:scale-105">
+      <Image
+        alt={`capa do artigo ${props.article.title}`}
+        src={props.article.imageUrl}
+        height={400}
+        width={500}
+        className="rounded-md overflow-hidden object-cover h-24 line-clamp-2"
+      />
+      <h2 className="font-bold text-lg mt-2">{props.article.title}</h2>
+      <p className="line-clamp-3 text-gray-400">{props.article.excerpt}</p>
+      <p className="text-sm text-gray-400 mt-2">
+        {props.article.author} | {props.article.createdAt}
+      </p>
+    </div>
+  )
+}

src/app/artigos/ArticleCard.tsx

@@ -0,0 +1,16 @@
+import { Article } from './Article'
+import { ArticleCard } from './ArticleCard'
+
+interface ArticleListProps {
+  articles: Article[]
+}
+
+export function ArticleList({ articles }: ArticleListProps) {
+  return (
+    <div className="grid grid-cols-3 max-lg:grid-cols-2 max-sm:grid-cols-1 max-sm:mx-8 items-center mx-auto gap-4 max-w-6xl">
+      {articles.map((article) => (
+        <ArticleCard key={article.id} article={article} />
+      ))}
+    </div>
+  )
+}

src/app/artigos/ArticleList.tsx

@@ -0,0 +1,14 @@
+import { Folder } from 'lucide-react'
+
+export function EmptyState() {
+  return (
+    <div className="grid gap-4 max-w-sm mx-auto mt-12">
+      <Folder className="h-10 w-10" />
+      <h2 className="font-bold text-xl">Nenhum resultado encontrado</h2>
+      <p>
+        Não encontrados um artigo relacioando a sua busca, tente buscar por
+        outro termo.
+      </p>
+    </div>
+  )
+}

src/app/artigos/EmptyState.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Search } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+const searchSchema = z.object({
+  query: z.string(),
+})
+
+export type SearchForm = z.infer<typeof searchSchema>
+
+interface SeachInputFieldProps {
+  onSubmit(search: SearchForm): void
+  onChange(search: SearchForm): void
+}
+
+export function SeachInputField(props: SeachInputFieldProps) {
+  const { register, handleSubmit, reset } = useForm<SearchForm>({
+    resolver: zodResolver(searchSchema),
+  })
+
+  function submitButtonActionHandler(search: SearchForm) {
+    props.onSubmit(search)
+    reset()
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit(submitButtonActionHandler)}
+      className="flex gap-2  max-w-lg mx-auto transition-all"
+    >
+      <div className="p-2 flex gap-2 border-gray-200 border-2 rounded-lg">
+        <input
+          {...register('query')}
+          type="text"
+          placeholder="Busque conteudo"
+          className="bg-transparent outline-none"
+        />
+      </div>
+      <button
+        type="submit"
+        className="transition-colors p-2 mx-auto flex gap-2 border-gray-200 text-gray-200 border-2 rounded-lg max-w-md hover:border-gray-100 hover:text-gray-100"
+      >
+        <Search />
+      </button>
+    </form>
+  )
+}