Merge pull request #32 from cristianofmc/M4-2

[M4-2] Modal with more details implemented
cristianofmc · Aug 21, 2022 · c75d4df · c75d4df
2 parents 7e9cd52 + 7772c23
commit c75d4df
Show file tree

Hide file tree

Showing 11 changed files with 132 additions and 28 deletions.
diff --git a/components/CoverRender.js b/components/CoverRender.js
@@ -9,7 +9,7 @@ const CoverRender = (props) => {
 
     return (
         <div className={`overflow-hidden ${displayimage ? `block` : `hidden`}`}>
-            <Image className="relative w-full h-40 object-cover rounded-t-md"  src={cover_url} width="600" height="400"  onError={() => setDisplayimage(false)}></Image>
+            <Image className="relative w-full  object-cover rounded-t-md"  src={cover_url} width={props.width} height={props.height} onError={() => setDisplayimage(false)}></Image>
         </div>
     );
 };

diff --git a/components/Icons/Close.js b/components/Icons/Close.js
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+const Close = (props) => (
+  <svg
+    className="h-6 w-6"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={2}
+    stroke="currentColor"
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M6 18 18 6M6 6l12 12"
+    />
+  </svg>
+)
+
+export default Close;
diff --git a/components/Icons/GitHubForkIcon.js b/components/Icons/GitHubForkIcon.js
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+const GitHubForkIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    strokeWidth={2}
+    xmlSpace="preserve"
+    fill="none"
+    stroke="currentColor"
+    {...props}
+  >
+    <path d="M0 0h24v24H0z" stroke="none" />
+    <circle cx={12} cy={18} r={2} />
+    <circle cx={7} cy={6} r={2} />
+    <circle cx={17} cy={6} r={2} />
+    <path d="M7 8v2a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V8M12 12v4" />
+  </svg>
+)
+
+export default GitHubForkIcon;
diff --git a/components/Icons/GitHubIcon.js b/components/Icons/GitHubIcon.js
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+const GitHubIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    viewBox="0 0 16 16"
+    data-view-component="true"
+    fill="none"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+    />
+  </svg>
+)
+
+export default GitHubIcon
diff --git a/components/MenuItem.js b/components/MenuItem.js
@@ -2,11 +2,11 @@ import Link from 'next/link';
 
 const MenuItem = (props) => {
     return(
-        <Link href={`/${props.href}`}>
-            <a className="group inline-flex items-center px-5 md:text-md  md:h-10 h-7 text-sm rounded-full font-semibold whitespace-nowrap focus:outline-none focus:ring-2 bg-neutral-100 mt-8">
-                {props.children}
-            </a>
-        </Link>
+            <Link href={`/${props.href}`}>
+                <a className="group inline-flex items-center px-5 md:text-md focus:ring-1 focus:ring-neutral-300 border border-transparent hover:border-neutral-300 md:h-10 h-7 text-sm rounded-full font-semibold whitespace-nowrap bg-black bg-opacity-[.08] mt-8">
+                    {props.children}
+                </a>
+            </Link>
     );
 };
 

diff --git a/components/Modal.js b/components/Modal.js
@@ -1,8 +1,13 @@
 import CoverRender from "./CoverRender";
 import Tag from "./Tag";
+import Close from "./Icons/Close";
+import GitHubForkIcon from "./Icons/GitHubForkIcon";
+import GitHubIcon from "./Icons/GitHubIcon";
+
 
 const Modal = ({visible, onClose, modalData}) => {
 
+    let coverSize = {width: "672", height:"342"}
     if(!visible) return null;
 
     const handleOnClose = (e) => {
@@ -11,21 +16,34 @@ const Modal = ({visible, onClose, modalData}) => {
 
     return(
         <div id='projectModal' onClick={handleOnClose} className="bg-zinc-900 bg-opacity-50 fixed inset-0 z-50 flex justify-center items-center">
-            <div className="bg-white mx-2 rounded-lg border border-zinc-500">
-            <div className="overflow-hidden cursor-pointer">
-                <CoverRender>{modalData}</CoverRender>
-            </div>
-
-            <div className="px-4 pt-3">
-                <h1 className="font-bold">{modalData.name}</h1>
-                <p>{modalData.description}</p>
-            </div>
-
-            <Tag>{modalData.topics}</Tag>
-                <button className='border border-zinc-500 inline-flex items-center h-6 rounded-full text-sm whitespace-nowrap px-2 mr-1.5 mt-1.5' onClick={onClose}>Close</button>
+            <div className="bg-white mx-2 rounded-lg border border-zinc-500 max-w-xl">
+                <div className="group relative">
+                    <div className="overflow-hidden cursor-pointer">
+                        <CoverRender width={coverSize.width} height={coverSize.height}>{modalData}</CoverRender>
+                    </div>
+                    <div className="absolute top-3 right-3 z-10 -ml-8 flex pt-1 pr-1 ">
+                        <button type="button" className="rounded-full text-white bg-gray-900 bg-opacity-[.03] hover:bg-gray-900 hover:bg-opacity-10 focus:outline-none p-1" onClick={onClose}>
+                            <span className="sr-only">Close modal</span>
+                            <Close/>
+                        </button>
+                    </div>
+                    <div className="px-4">
+                        <h1 className="text-xl font-normal tracking-normal leading-7 pt-4 pb-3">{modalData.name}</h1>
+                        <p className="text-base font-normal tracking-normal leading-6 pt-1 pb-3" >{modalData.description}</p>
+                    </div>
+                </div>
+                <Tag>{modalData.topics}</Tag>
+                <div className="my-1 text-gray-900">
+                    <a className="inline-flex items-center rounded-full p-2 mx-2 hover:bg-gray-600 hover:bg-opacity-[0.15] text-sm" target="_blank" href={modalData.html_url}>
+                        <GitHubIcon  width={15} height={15} className="text-neutral-700 fill-current"/> <span className="ml-1">GitHub</span>
+                    </a>
+                    <a className="inline-flex items-center rounded-full p-2 mx-2 hover:bg-gray-600 hover:bg-opacity-[0.15] text-sm" target="_blank" href={`${modalData.html_url}/fork`}>
+                        <GitHubForkIcon  width={15} height={15} className="text-neutral-700"/> <span className="ml-1">Fork</span>
+                    </a>
+                </div>
             </div>
         </div>
     );
 };
 
-export default Modal;
+export default Modal;
diff --git a/components/Projects.js b/components/Projects.js
@@ -9,19 +9,26 @@ const Projects = (props) => {
     const [modalOn, setModalOn] = useState(false);
     const [modalData, setModalData] = useState(null);
 
-    const handleOnOpen = () => setModalOn(true);
-    const handleOnClose = () => setModalOn(false);
+    const handleOnOpen = () => {
+        document.body.classList.add("overflow-y-hidden");
+        setModalOn(true);
+
+    }
+    const handleOnClose = () => {
+        document.body.classList.remove("overflow-y-hidden");
+        setModalOn(false);
+    }
 
     return (
-        <div id="projects" className="pt-3">
+        <div id="projects" className="py-3">
             <ul key="1" className="mx-4 grid sm:grid-cols-2 md:grid-cols-4  gap-y-10 gap-x-6">
                 {
                     props.children.map((data, index) => {
-                        return <li id={data.id} key={data.id} className="mx-2 rounded-lg border border-zinc-500">
+                        return <li id={data.id} key={data.id} className="mx-2 rounded-lg border border-neutral-300">
                             <div className="overflow-hidden cursor-pointer" 
                             onClick={() => {setModalData(data); handleOnOpen();} }>
 
-                                <CoverRender>{data}</CoverRender>
+                                <CoverRender width="600" height="400" >{data}</CoverRender>
                             </div>
 
                             <div className="px-4 pt-3">

diff --git a/components/Tag.js b/components/Tag.js
@@ -1,9 +1,11 @@
 const Tag = (props) => {
     return(
-        <div className="px-2.5 pt-1.5 pb-3.5">
+        <div className="px-2.5 py-1.5 ">
 
             {props.children.map((tag, index) => (
-                <a key={`tag-${index}`} className="border border-zinc-500 inline-flex items-center h-6 rounded-full text-sm whitespace-nowrap px-2 mr-1.5 mt-1.5" href="/">{tag}</a>
+                <div key={`tag-${index}`} className="bg-black bg-opacity-[.08] inline-flex items-center h-6 rounded-full text-sm text-zinc-700 whitespace-nowrap px-2 mr-1.5 mt-1.5">
+                    <a className="p-px" href="/">{tag}</a>
+                </div>
             ))
             }
 

diff --git a/next.config.js b/next.config.js
@@ -3,4 +3,5 @@ module.exports = {
   images: {
     domains: ['raw.githubusercontent.com'],
   },
-}
+}
+
diff --git a/pages/index.js b/pages/index.js
@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import Head from 'next/head';
 import Hero from '../components/Hero';
 import MenuItem from '../components/MenuItem';

diff --git a/public/creativeCommonsAttribution.txt b/public/creativeCommonsAttribution.txt
@@ -1,3 +1,19 @@
 File: favicon.ico 
 by: Daniel Bruce
+LIcense: Creative Commons
 download: iconscout.com/icon/briefcase-401 [2022-03-05 16:34(GTM-3)]
+
+File: git_fork_ico.svg
+by: tabler.io
+License: The MIT
+download: seekicon.com/free-icon/git-fork_1 [2022-08-15 21:20(GTM-3)]
+
+File: star_project.svg
+by: typicons.com
+License: CC BY-SA 4.0
+download: seekicon.com/free-icon/star-outline_6 [2022-08-15 21:20(GTM-3)]
+
+File: watch_project.svg
+by: zurb.com
+License: CC0 1.0
+download: seekicon.com/free-icon/eye_23 [2022-08-15 21:20(GTM-3)]
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,4 +3,5 @@ module.exports = { @@
       images: {
         domains: ['raw.githubusercontent.com'],
       },
-    }
+    }