Merge pull request #13 from imotD/master

deploy

.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

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;
+}

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>
   );

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>

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>

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="image/pokephoto.png"
+        src="src/assets/images/pokephoto.png"
         alt="Pokemon logo"
         width="400"
         height="400"