Add Deploy

.eslintrc.json

@@ -30,7 +30,6 @@
 				"alphabetize": { "order": "asc", "ignoreCase": true }
 			}
 		],
-		"@next/next/no-img-element": "off",
 		"@typescript-eslint/no-explicit-any": "off"
 	}
 }

.github/workflows/deploy.yml

@@ -1,25 +1,85 @@
-name: deploy
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
 
 on:
+  # Runs on pushes targeting the default branch
   push:
     branches:
       - master
 
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
 jobs:
-  deploy:
+  # Build job
+  build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - name: Checkout
+        uses: actions/checkout@v3
 
-      - name: Install Dependencies
+      - name: Detect package manager
+        id: detect-package-manager
         run: |
-          yarn
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
 
-      - name: Build
-        run: yarn build
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "lts/*"
+          cache: yarn
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
 
-      - name: Deploy 🚀
-        uses: JamesIves/[email protected]
+      - name: Restore cache
+        uses: actions/cache@v3
         with:
-          branch: release # The branch the action should deploy to.
-          folder: out # The folder the action should deploy
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build with Next.js
+        run: yarn next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

next.config.js

@@ -9,6 +9,10 @@ const withPWA = require("next-pwa")({
 
 const nextConfig = withPWA({
 	output: "export",
+	basePath: "/frontend",
+	images: {
+		unoptimized: true,
+	},
 	eslint: {
 		ignoreDuringBuilds: true,
 	},

src/app/(public)/transacao/[transactionId]/TransactionInOut/index.tsx

@@ -3,6 +3,7 @@
 import { budget, cards, categories } from "assets/data";
 import { Icon } from "components/Icon";
 import { useCurrentBudget } from "contexts/current-budget";
+import Image from "next/image";
 import { CardTypeEnum } from "types/enums/card-type";
 import { TransactionInOut as TransactionInOutType } from "types/transaction";
 import { formatFullDate } from "utils/date";
@@ -34,7 +35,11 @@ const Card = ({ cardId }: { cardId: string }) => {
 			<span className="text-sm text-content-t">Cartao</span>
 
 			<div className="flex flex-row gap-2 items-center">
-				<img src={card.iconUrl} className="w-12 h-full rounded" />
+				<Image
+					src={card.iconUrl}
+					alt={card.name}
+					className="w-12 h-full rounded"
+				/>
 
 				<div className="flex flex-col">
 					<span>{card.name}</span>

src/components/Inputs/Select/index.tsx

@@ -1,9 +1,7 @@
-/* eslint-disable @next/next/no-img-element */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import { Listbox, Transition } from "@headlessui/react";
 import { colors } from "assets/colors";
 import { Icon } from "components/Icon";
+import Image from "next/image";
 import React from "react";
 import { Fragment } from "react";
 import { BsFillCaretDownFill } from "react-icons/bs";
@@ -90,7 +88,7 @@ export function SelectInput<T extends Record<string, any>>({
 											<Icon icon={selected[fieldNames.icon]} size={2} />
 										)}
 										{fieldNames.iconUrl && (
-											<img
+											<Image
 												src={selected[fieldNames.iconUrl]}
 												alt={selected[fieldNames.label]}
 												className="w-4 h-4"
@@ -171,7 +169,7 @@ export function SelectInput<T extends Record<string, any>>({
 												<Icon icon={d[fieldNames?.icon]} size={2} />
 											)}
 											{fieldNames.iconUrl && d[fieldNames.iconUrl] && (
-												<img
+												<Image
 													src={d[fieldNames?.iconUrl]}
 													alt={d[fieldNames.label]}
 													className="w-4 h-4"

src/components/WalletItem/index.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { MdKeyboardArrowRight } from "react-icons/md";
 
 interface Props {
@@ -17,7 +18,7 @@ export const WalletItem = ({
 }: Props) => {
 	return (
 		<div className="relative grid grid-cols-7 gap-1 items-center bg-accent text-accent-content container-padding rounded">
-			<img src={iconUrl} alt={label} className="w-12 h-full rounded" />
+			<Image src={iconUrl} alt={label} className="w-12 h-full rounded" />
 
 			<div className="flex flex-col col-span-3">
 				<span className="font-semibold">{name}</span>