Add responsive styling (#9)

app/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/layout.js

@@ -1,4 +1,4 @@
-import "../styles/reboot.css";
+import "./global.css";
 import GithubCorner from "../components/github-corner";
 
 export const metadata = {

app/page.js

@@ -1,31 +1,24 @@
 import Link from "next/link";
-import styles from "../styles/home.module.scss";
 import swagPhotos from "../photos";
-import BlurImage from "../components/blur-image";
+import Image from "next/image";
 
 export default function Home() {
   const photos = swagPhotos;
 
   return (
-    <main className={styles.container}>
-      <div>
-        <h1>NextGram</h1>
-      </div>
-      <div className={styles.images}>
+    <main className="container mx-auto">
+      <h1 className="text-center text-4xl font-bold m-10">NextGram</h1>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 auto-rows-max	 gap-6 m-10">
         {photos.map(({ id, imageSrc }) => (
-          <div key={id} className={styles.imageContainer}>
-            <div key={id} className={styles.imageWrapper}>
-              <Link href={`/photos/${id}`}>
-                <BlurImage
-                  alt=""
-                  src={imageSrc}
-                  height={500}
-                  width={500}
-                  objectFit="cover"
-                />
-              </Link>
-            </div>
-          </div>
+          <Link key={id} href={`/photos/${id}`}>
+            <Image
+              alt=""
+              src={imageSrc}
+              height={500}
+              width={500}
+              className="w-full object-cover aspect-square"
+            />
+          </Link>
         ))}
       </div>
     </main>

app/photos/[id]/page.js

@@ -1,14 +1,13 @@
 import React from "react";
 import Photo from "../../../components/frame";
 import swagPhotos from "../../../photos";
-import { permalink, wrap } from "./styles.module.css";
 
 export default function PhotoPage({ params: { id } }) {
   const photo = swagPhotos.find((p) => p.id === id);
 
   return (
-    <div className={permalink}>
-      <div className={wrap}>
+    <div className="container mx-auto my-10">
+      <div className="w-1/2 mx-auto border border-gray-700">
         <Photo photo={photo} />
       </div>
     </div>

components/frame/index.js

@@ -1,25 +1,20 @@
-import Image from "next/legacy/image";
-import styles from "./styles.module.css";
+import Image from "next/image";
 
 export default function Photo({ photo }) {
   return (
-    <div className={styles.photo}>
-      <div className={styles.image}>
-        <Image
-          alt=""
-          src={photo.imageSrc}
-          height={600}
-          width={600}
-          objectFit="cover"
-        />
-      </div>
+    <>
+      <Image
+        alt=""
+        src={photo.imageSrc}
+        height={600}
+        width={600}
+        className="w-full object-cover aspect-square col-span-2"
+      />
 
-      <div className={styles.sidebar}>
-        <ul className={styles.sidebarList}>
-          <h3>{photo.name}</h3>
-          <p>Taken by {photo.username}</p>
-        </ul>
+      <div className="bg-white p-4 px-6">
+        <h3>{photo.name}</h3>
+        <p>Taken by {photo.username}</p>
       </div>
-    </div>
+    </>
   );
 }

components/modal/index.js

@@ -1,6 +1,5 @@
 "use client";
 import { useCallback, useRef, useEffect } from "react";
-import styles from "./styles.module.css";
 import { useRouter } from "next/navigation";
 
 export default function Modal({ children }) {
@@ -34,8 +33,15 @@ export default function Modal({ children }) {
   }, [onKeyDown]);
 
   return (
-    <div ref={overlay} className={styles.overlay} onClick={onClick}>
-      <div ref={wrapper} className={styles.wrapper}>
+    <div
+      ref={overlay}
+      className="fixed z-10 left-0 right-0 top-0 bottom-0 mx-auto bg-black/60"
+      onClick={onClick}
+    >
+      <div
+        ref={wrapper}
+        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full sm:w-10/12 md:w-8/12 lg:w-1/2 p-6"
+      >
         {children}
       </div>
     </div>

package.json

@@ -7,12 +7,16 @@
     "start": "next start"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.13",
     "clsx": "^1.1.1",
     "next": "13.3.1-canary.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "sass": "^1.49.9"
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.21",
+    "sass": "^1.49.9",
+    "tailwindcss": "^3.3.1"
   }
 }