docs: add sortable-gallery example

igordanchenko · Jul 29, 2024 · 567a204 · 567a204
1 parent fe484b6
commit 567a204
Show file tree

Hide file tree

Showing 19 changed files with 2,426 additions and 0 deletions.
diff --git a/docs/examples.md b/docs/examples.md
@@ -10,6 +10,8 @@ demos, source code, and ready-to-use code sandboxes.
  various parameters live
 - [**Customization**](/examples/customization) - an example showcasing custom
  render functions and various photo album props
+- [**Sortable Gallery**](/examples/sortable-gallery) - an example of a sortable
+ gallery built with [@dnd-kit](https://dndkit.com/)
 - [**Next.js Image**](/examples/nextjs) - Next.js Image component
 - [**Lightbox**](/examples/lightbox) - photo gallery with lightbox built with
  [yet-another-react-lightbox](https://yet-another-react-lightbox.com/)

diff --git a/docs/examples/sortable-gallery.md b/docs/examples/sortable-gallery.md
@@ -0,0 +1,16 @@
+# Sortable Gallery
+
+Here is an example of a sortable gallery built with
+[@dnd-kit](https://dndkit.com/). You can re-arrange photos via drag-and-drop.
+
+## Live Demo
+
+<SortableGalleryExample />
+
+## Sandbox
+
+<StackBlitzLink href="github/igordanchenko/react-photo-album/tree/main/examples/sortable-gallery" file="src/App.tsx" title="react-photo-album-sortable-gallery" description="react-photo-album sortable gallery" />
+
+## Source Code
+
+<GitHubLink suffix="sortable-gallery" />
diff --git a/examples/sortable-gallery/.gitignore b/examples/sortable-gallery/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/sortable-gallery/index.html b/examples/sortable-gallery/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta name="theme-color" content="#ffffff" />
+ <title>React Photo Album | Sortable Gallery</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>