Merge branch 'release/0.17.0'

app/layout.tsx

@@ -8,7 +8,6 @@ const inter = Inter({ subsets: ['latin'] })
 const siteInfo = getSiteInfo()
 
 export async function generateMetadata(): Promise<Metadata> {
-    const siteInfo = getSiteInfo()
     return {
         title: `${siteInfo.title} - ${siteInfo.description}`,
         description: siteInfo.description,

app/page.tsx

@@ -1,11 +1,12 @@
-import { PaginationBar, ProductList } from '@/components'
+import { PaginationBar, ProductList, VendorsList } from '@/components'
 import { getProducts } from '@/services'
 
 export default async function Home() {
     const products = await getProducts({ page: 1 })
     const allProducts: IProduct[] = products.data
     return (
-        <div className='flex flex-wrap gap-8'>
+        <div className='flex flex-wrap gap-4 md:gap-8'>
+            <VendorsList />
             <ProductList products={allProducts} />
             <PaginationBar page={products.page} totalPages={products.totalPages} />
         </div>

components/avatar/Avatar.tsx

@@ -7,8 +7,8 @@ export interface AvatarProps {
 
 export const Avatar: FC<AvatarProps> = ({ image }): JSX.Element => {
     return (
-        <div className='avatar__container w-24 aspect-square rounded-full bg-slate-200 overflow-hidden flex items-center justify-center'>
-            <figure className='avatar__figure relative w-16 h-16'>
+        <div className='avatar__container w-16 md:w-24 p-2 md:p-4 aspect-square rounded-full bg-slate-200 overflow-hidden flex items-center justify-center'>
+            <figure className='avatar__figure relative w-full h-full'>
                 <Image
                     {...image}
                     className='avatar__image object-contain'

components/index.ts

@@ -14,3 +14,4 @@ export * from './searchbar/SearchBar'
 export * from './social-bar/SocialBar'
 export * from './text/Text'
 export * from './tooltip/Tooltip'
+export * from './vendors-list/VendorsList'

components/vendors-list/VendorsList.tsx

@@ -0,0 +1,24 @@
+import { getVendors } from '@/services'
+import { Avatar } from '@/components'
+import Link from 'next/link'
+
+export const VendorsList = async () => {
+    const vendors = await getVendors()
+    return (
+        <div className='flex flex-wrap gap-4'>
+            {vendors.data.map((vendor: IVendor) => {
+                if (!vendor.products?.total) return
+                return (
+                    <Link key={vendor._id} href={`/loja/${vendor.slug}`}>
+                        <Avatar
+                            image={{
+                                src: vendor.image.src,
+                                alt: vendor.image.alt,
+                            }}
+                        />
+                    </Link>
+                )
+            })}
+        </div>
+    )
+}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "desconto-porreta",
-    "version": "0.16.0",
+    "version": "0.17.0",
     "private": true,
     "scripts": {
         "dev": "next dev",

services/vendor.ts

@@ -1,8 +1,3 @@
-interface IgetVendors {
-    data: IVendor[]
-    meta: Object
-}
-
 export const getVendors = async (): Promise<IPromise> => {
     try {
         const res = await fetch(`${process.env.API_URL}/api/vendors`, {

types/vendor.d.ts

@@ -2,6 +2,9 @@ interface IVendor {
     _id: string
     title: string
     slug: string
+    products?: {
+        total?: number
+    }
     image: {
         src: string
         alt: string