From ca3f9b7f9f9d9b4496131d8f2b0f0f2a739836e5 Mon Sep 17 00:00:00 2001
From: Oktay <oktaycolakoglu@gmail.com>
Date: Sun, 3 Jul 2022 15:14:49 +0300
Subject: [PATCH] Scroll snap feature (#22)

---
 components/repo-card.js | 2 +-
 components/shot-card.js | 2 +-
 pages/index.js          | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/repo-card.js b/components/repo-card.js
index e7456b1..aa21c58 100644
--- a/components/repo-card.js
+++ b/components/repo-card.js
@@ -41,7 +41,7 @@ export default function RepoCard({
   return (
     <div
       key={id}
-      className="relative group h-full w-3/4 sm:w-full flex-shrink-0"
+      className="relative group h-full w-3/4 sm:w-full flex-shrink-0 snap-start"
     >
       <div className="aspect-3/2">
         <div className="card flex flex-col h-full w-full p-4 md:p-6">
diff --git a/components/shot-card.js b/components/shot-card.js
index c5a2fa0..71f77c2 100644
--- a/components/shot-card.js
+++ b/components/shot-card.js
@@ -16,7 +16,7 @@ export default function ShotCard({ id, title, images, html_url, tags }) {
   return (
     <div
       key={id}
-      className="relative group h-full w-3/4 md:w-full flex-shrink-0"
+      className="relative group h-full w-3/4 md:w-full flex-shrink-0 snap-start"
     >
       <div className="relative aspect-[4/3]">
         <Image
diff --git a/pages/index.js b/pages/index.js
index bf2f56a..fea34c6 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -129,7 +129,7 @@ export default function Home({ repos, shots, homepage, seo }) {
             </p>
           </div>
           <div className="col-span-12 col-start-4 mt-8 md:mt-0">
-            <div className="flex overflow-scroll gap-6 sm:overflow-auto sm:grid sm:grid-cols-2 xl:grid-cols-3">
+            <div className="flex overflow-scroll gap-6 snap-mandatory snap-x sm:overflow-auto sm:grid sm:grid-cols-2 xl:grid-cols-3">
               {repos.slice(0, 6).map(RepoCard)}
             </div>
           </div>
@@ -151,7 +151,7 @@ export default function Home({ repos, shots, homepage, seo }) {
             </p>
           </div>
           <div className="col-span-12 col-start-4 mt-8 md:mt-0">
-            <div className="flex overflow-scroll gap-6 md:overflow-auto md:grid md:grid-cols-2 xl:grid-cols-3">
+            <div className="flex overflow-scroll gap-6 snap-mandatory snap-x md:overflow-auto md:grid md:grid-cols-2 xl:grid-cols-3">
               {shots.slice(0, 6).map(ShotCard)}
             </div>
           </div>