[Time 218 (mkdevs)] - Product Reviews Component

[viktormarinho]

Qual a section que voce esta fazendo?

Categoria 9 - Review Figma Componente de Review - link Preview admin - link

Sobre: O componente possui uma paginação que se organiza de forma dinâmica, sendo possível selecionar o número de páginas pelo painel de admin. Para ver funcionando, basta adicionar mais Reviews do que o tamanho de uma PageSize.

Importante: Por conta do nosso componente precisar de javascript client-side, precisamos colocar ele na pasta islands do projeto fresh. Isto foi acertado com os mentores.

JSON Para mock dos dados mais fácil:

{
  "__resolveType": "./islands/ProductReview.tsx",
  "title": "Product reviews",
  "reviews": [
    {
      "id": "1",
      "reviewerName": "John Doe",
      "rating": 4,
      "date": "2023-05-19",
      "title": "Gostei",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare",
      "likes": 10,
      "dislikes": 7,
      "reviewerImageUrl": null
    },
    {
      "id": "2",
      "reviewerName": "Mary Jane",
      "rating": 3,
      "date": "2023-05-11",
      "title": "Lorem ipsum",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare",
      "likes": 2,
      "dislikes": 1,
      "reviewerImageUrl": "https://avatars.githubusercontent.com/u/56888067?v=4"
    },
    {
      "id": "3",
      "reviewerName": "Name surname",
      "rating": 4,
      "date": "2023-05-13",
      "title": "Lorem ipsum",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare",
      "likes": 2,
      "dislikes": 5,
      "reviewerImageUrl": "https://avatars.githubusercontent.com/u/39712525?v=4"
    },
    {
      "id": "4",
      "reviewerName": "João do Pão",
      "rating": 1,
      "date": "2023-05-09",
      "title": "Lorem ipsum",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare",
      "likes": 10,
      "dislikes": 5,
      "reviewerImageUrl": "https://avatars.githubusercontent.com/u/56888067?v=4"
    },
    {
      "id": "5",
      "reviewerName": "Daniel Henrique",
      "rating": 3,
      "date": "2023-05-05",
      "title": "Lorem ipsum",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare",
      "likes": 1,
      "dislikes": 5,
      "reviewerImageUrl": null
    }
  ],
  "pageSize": 2
}

Checklist

• [x] Estou usando tokens do DaisyUI e Tailwind CSS
• [x] Fiz alterações somente no arquivo destinado a section do meu grupo
• [x] O componente esta editável no admin da Deco
• [x] Adicionei link de preview da section do admin da deco no PR
• [x] Minha section funciona com propriedades padrão
• [x] Adicionei links das variacoes do figma que fiz no PR

[viktormarinho]

OK

[viktormarinho]

@tlgimenes O componente Icon era do próprio template já, não fomos nós que fizemos, movo ele mesmo assim?