From 875c54d810211b0fb277220c1e4d7f6cb2a1f847 Mon Sep 17 00:00:00 2001
From: Tommy Alhamra <45749487+imotD@users.noreply.github.com>
Date: Thu, 5 Dec 2024 13:24:30 +0700
Subject: [PATCH 1/3] 5 responsife web (#12)

* fix(image): change url path image

* fix: responsive design

---------

Co-authored-by: Tommy Alhamra <tommy.alhamra@ist.id>
---
 src/App.css                                |   9 ++++++++-
 src/App.jsx                                |  12 +++++-------
 {image => src/assets/images}/bg-forest.jpg | Bin
 {image => src/assets/images}/pokeball.gif  | Bin
 {image => src/assets/images}/pokephoto.png | Bin
 src/components/MiniDetail.jsx              |   4 ++--
 src/components/molecules/Footer.jsx        |   2 +-
 src/components/molecules/Header.jsx        |   2 +-
 8 files changed, 17 insertions(+), 12 deletions(-)
 rename {image => src/assets/images}/bg-forest.jpg (100%)
 rename {image => src/assets/images}/pokeball.gif (100%)
 rename {image => src/assets/images}/pokephoto.png (100%)

diff --git a/src/App.css b/src/App.css
index 8907e89..6b49722 100644
--- a/src/App.css
+++ b/src/App.css
@@ -63,7 +63,7 @@
 }
 
 .bg-photo {
-  background-image: url("../image/bg-forest.jpg");
+  background-image: url("../src/assets/images/bg-forest.jpg");
   background-size: cover;
   background-repeat: round;
   object-fit: contain;
@@ -110,3 +110,10 @@
     rgb(255 220 89) 130%
   );
 }
+
+.example-container div {
+  background: black;
+  border-radius: 30px;
+  width: 150px;
+  height: 150px;
+}
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 2011c01..2434d6d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,6 +2,7 @@ import "./App.css";
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
+import { motion } from "framer-motion";
 
 import Loading from "./components/Loading";
 import MiniDetail from "./components/MiniDetail";
@@ -139,14 +140,13 @@ function App() {
   );
 
   return (
-    <div className="App h-screen">
+    <div className="App sm:h-screen">
       {/* HEADER */}
       <Header />
-
       {/* CONTENT */}
-      <div className="flex items-center gap-2 justify-center">
+      <div className="sm:flex items-center gap-2 justify-center">
         <div className="pattern-box"></div>
-        <div className="w-1/2 p-5 m-auto ">
+        <div className="sm:w-1/2 sm:p-5 m-auto ">
           {/* SEARCHING */}
           <Searching onHandleSubmit={onClickSearch} />
 
@@ -157,14 +157,12 @@ function App() {
             </div>
           </div>
         </div>
-
         {/* PAGE DETAILS */}
-        <div className="w-1/2 p-5">
+        <div className="flex sm:w-1/2 p-5 justify-center sm:justify-start sm:mt-0 mt-10">
           <MiniDetail loading={loadingDetail} data={detail} />
         </div>
       </div>
 
-      {/* FOOTER */}
       <Footer year="2023" />
     </div>
   );
diff --git a/image/bg-forest.jpg b/src/assets/images/bg-forest.jpg
similarity index 100%
rename from image/bg-forest.jpg
rename to src/assets/images/bg-forest.jpg
diff --git a/image/pokeball.gif b/src/assets/images/pokeball.gif
similarity index 100%
rename from image/pokeball.gif
rename to src/assets/images/pokeball.gif
diff --git a/image/pokephoto.png b/src/assets/images/pokephoto.png
similarity index 100%
rename from image/pokephoto.png
rename to src/assets/images/pokephoto.png
diff --git a/src/components/MiniDetail.jsx b/src/components/MiniDetail.jsx
index 63fc756..85c850d 100644
--- a/src/components/MiniDetail.jsx
+++ b/src/components/MiniDetail.jsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 
 import PropTypes from "prop-types";
-import pokeBallLoading from "../../image/pokeball.gif";
+import pokeBallLoading from "../../src/assets/images/pokeball.gif";
 
 export default function Detail({ data, loading }) {
   const pokeSpritesPhotoUrl = useSelector(
@@ -31,7 +31,7 @@ export default function Detail({ data, loading }) {
       <p className="capitalize text-sm my-2 font-bold">
         {data.name || "PokeBall"}
       </p>
-      <div className="absolute rotate-12 -top-1 -right-11 bg-amber-500/55 w-28 h-8 sticky-tape">
+      <div className="absolute rotate-12 -top-1 sm:-right-11 right-0 bg-amber-500/55 w-28 h-8 sticky-tape">
         <span className="font-bold text-slate-50 drop-shadow-lg">
           #{data?.id || "00"}
         </span>
diff --git a/src/components/molecules/Footer.jsx b/src/components/molecules/Footer.jsx
index 637efe9..18791c0 100644
--- a/src/components/molecules/Footer.jsx
+++ b/src/components/molecules/Footer.jsx
@@ -1,6 +1,6 @@
 export default function Footer(props) {
   return (
-    <footer className="footer text-sm py-5 bg-white absolute bottom-0 left-0 right-0">
+    <footer className="footer text-sm py-5 mt-5 bg-white sm:absolute bottom-0 left-0 right-0 p-2">
       © {props.year} Pokephoto Released under MIT License. The source code is
       available on{" "}
       <b>
diff --git a/src/components/molecules/Header.jsx b/src/components/molecules/Header.jsx
index 086dc48..83b71de 100644
--- a/src/components/molecules/Header.jsx
+++ b/src/components/molecules/Header.jsx
@@ -3,7 +3,7 @@ export default function Header() {
     <div className="py-5">
       <img
         className="m-auto"
-        src="image/pokephoto.png"
+        src="/src/assets/images/pokephoto.png"
         alt="Pokemon logo"
         width="400"
         height="400"

From e41ce1fca5b1fa7906bf5ddbbfe4c89f41062415 Mon Sep 17 00:00:00 2001
From: Tommy Alhamra <tommy.alhamra@ist.id>
Date: Thu, 5 Dec 2024 13:42:50 +0700
Subject: [PATCH 2/3] fix(deploy): update config

---
 .github/workflows/github-actions-deploy.yml | 111 ++++++++++++++------
 1 file changed, 76 insertions(+), 35 deletions(-)

diff --git a/.github/workflows/github-actions-deploy.yml b/.github/workflows/github-actions-deploy.yml
index 0d9a17a..9666c60 100644
--- a/.github/workflows/github-actions-deploy.yml
+++ b/.github/workflows/github-actions-deploy.yml
@@ -4,50 +4,91 @@ on:
   push:
     branches:
       - rc
+
+# Allows you to run this workflow manually from the Actions tab
+workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
 jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - run: echo "🎉 The job was automatically triggered by a ${{ github.event_name }} event."
-      - run: echo "🐧 This job is now running on a ${{ runner.os }} server hosted by GitHub!"
-      - run: echo "🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
+  # build:
+  #   name: Build
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - run: echo "🎉 The job was automatically triggered by a ${{ github.event_name }} event."
+  #     - run: echo "🐧 This job is now running on a ${{ runner.os }} server hosted by GitHub!"
+  #     - run: echo "🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
 
-      - name: Check out repository code
-        uses: actions/checkout@v4
+  #     - name: Check out repository code
+  #       uses: actions/checkout@v4
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
+  #     - name: Setup Node.js
+  #       uses: actions/setup-node@v3
+  #       with:
+  #         node-version: 16
 
-      - name: Install dependencies
-        run: npm install
+  #     - name: Install dependencies
+  #       run: npm install
 
-      - name: Build project
-        run: npm run deploy
+  #     - name: Build project
+  #       run: npm run deploy
 
-      - name: Upload production-ready build files
-        uses: actions/upload-artifact@v4
-        with:
-          name: production-files
-          path: ./dist
+  #     - name: Upload production-ready build files
+  #       uses: actions/upload-artifact@v4
+  #       with:
+  #         name: production-files
+  #         path: ./dist
 
   deploy:
-    name: Deploy
-    needs: build
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/main'
+    # name: Deploy
+    # needs: build
+    # runs-on: ubuntu-latest
+    # if: github.ref == 'refs/heads/main'
+
+    # steps:
+    #   - name: Download artifact
+    #     uses: actions/download-artifact@v4
+    #     with:
+    #       name: production-files
+    #       path: ./dist
 
+    #   - name: Deploy to GitHub Pages
+    #     uses: peaceiris/actions-gh-pages@v3
+    #     with:
+    #       github_token: ${{ secrets.GITHUB_TOKEN }}
+    #       publish_dir: ./dist
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
     steps:
-      - name: Download artifact
-        uses: actions/download-artifact@v4
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
         with:
-          name: production-files
-          path: ./dist
-
-      - name: Deploy to GitHub Pages
-        uses: peaceiris/actions-gh-pages@v3
+          node-version: 20
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./dist
+          # Upload dist folder
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

From d617afedec4cec923001b48b3454734aa8c9fed5 Mon Sep 17 00:00:00 2001
From: Tommy Alhamra <tommy.alhamra@ist.id>
Date: Thu, 5 Dec 2024 13:48:19 +0700
Subject: [PATCH 3/3] fix: size iamge

---
 src/components/molecules/Header.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/Header.jsx b/src/components/molecules/Header.jsx
index 83b71de..5dee483 100644
--- a/src/components/molecules/Header.jsx
+++ b/src/components/molecules/Header.jsx
@@ -1,9 +1,9 @@
 export default function Header() {
   return (
-    <div className="py-5">
+    <div className="py-5 sm:p-0 p-5">
       <img
         className="m-auto"
-        src="/src/assets/images/pokephoto.png"
+        src="src/assets/images/pokephoto.png"
         alt="Pokemon logo"
         width="400"
         height="400"