This repository has no description
trying adding lightbox
author
damedotblog
date
(Feb 24, 2025, 1:25 PM -0500)
commit
fdbae383
fdbae3832be48669c193194e860d48dcf176ff57
parent
6000a762
6000a762068e74d5b2d9e734752f74ba54b2f58f
+62
-14
+10
package-lock.json
+10
package-lock.json
···
27
27
"react-dom": "^18.2.0",
28
28
"react-grid-layout": "^1.5.0",
29
29
"react-helmet": "^6.1.0",
30
+
"react-image-gallery": "^1.4.0",
30
31
"react-resizable": "^3.0.5",
31
32
"react-router-dom": "^6.28.1",
32
33
"react-scripts": "^5.0.1",
···
15050
15051
},
15051
15052
"peerDependencies": {
15052
15053
"react": ">=16.3.0"
15054
+
}
15055
+
},
15056
+
"node_modules/react-image-gallery": {
15057
+
"version": "1.4.0",
15058
+
"resolved": "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-1.4.0.tgz",
15059
+
"integrity": "sha512-m7xLq7+g6/xh+BhVMAxvRU0132sNcEFglYsVsgthrnItl9VtLE7MuVvVWD9pvzcI+WBP5+p9HvnRwIiyhPkBDg==",
15060
+
"license": "MIT",
15061
+
"peerDependencies": {
15062
+
"react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
15053
15063
}
15054
15064
},
15055
15065
"node_modules/react-is": {
+1
package.json
+1
package.json
+2
src/components/Shortcut/Shortcut.css
+2
src/components/Shortcut/Shortcut.css
+49
-14
src/components/Shortcut/Shortcut.js
+49
-14
src/components/Shortcut/Shortcut.js
···
1
1
// src/components/Shortcut/Shortcut.jsx
2
-
import React from 'react';
2
+
import React, { useState } from 'react';
3
+
import ImageGallery from 'react-image-gallery';
4
+
import 'react-image-gallery/styles/css/image-gallery.css';
3
5
import './Shortcut.css';
4
6
5
7
const Shortcut = () => {
8
+
const [isOpen, setIsOpen] = useState(false);
9
+
const [currentIndex, setCurrentIndex] = useState(0);
10
+
11
+
const images = [
12
+
{
13
+
original: '/how-to-use-cred-blue-shortcut.png',
14
+
thumbnail: '/how-to-use-cred-blue-shortcut.png',
15
+
},
16
+
{
17
+
original: '/enable-share-sheet.png',
18
+
thumbnail: '/enable-share-sheet.png',
19
+
},
20
+
];
21
+
22
+
const openLightbox = (index) => {
23
+
setCurrentIndex(index);
24
+
setIsOpen(true);
25
+
};
26
+
27
+
const closeLightbox = () => {
28
+
setCurrentIndex(0);
29
+
setIsOpen(false);
30
+
};
31
+
6
32
return (
7
33
<>
8
34
<main className="shortcut-page">
···
11
37
<p>
12
38
If you have an iPhone, iPad, or Macbook, you can download a special Apple Shortcut to your device that will allow you to quickly check a Bluesky account's cred.blue score while you're scrolling inside of the Bluesky app.
13
39
</p>
14
-
15
40
<div className="image-container">
16
41
<img
17
42
src="/how-to-use-cred-blue-shortcut.png"
18
43
alt="How to use Cred.blue Shortcut"
19
44
className="shortcut-image"
45
+
onClick={() => openLightbox(0)}
20
46
/>
21
47
</div>
22
-
23
-
<div className="shortcut-buttons">
24
-
<button
25
-
className="patreon-button"
26
-
type="button"
27
-
onClick={() => window.open('https://cred.blue/shortcut', '_blank')}
28
-
>
29
-
Download Shortcut
30
-
</button>
31
-
</div>
32
-
33
48
<p>
34
49
Once you have the Apple Shortcut installed, go through the setup process to enter your username and then check to make sure that the Share Sheet feature has been enabled.
35
50
</p>
36
-
37
51
<div className="image-container">
38
52
<img
39
53
src="/enable-share-sheet.png"
40
54
alt="Enable Share Sheet"
41
55
className="shortcut-image"
56
+
onClick={() => openLightbox(1)}
42
57
/>
43
58
</div>
59
+
<div className="shortcut-buttons">
60
+
<button
61
+
className="shortcut-button"
62
+
type="button"
63
+
onClick={() => window.open('https://cred.blue/shortcut', '_blank')}
64
+
>
65
+
Download Shortcut
66
+
</button>
67
+
</div>
44
68
</div>
45
69
</main>
70
+
71
+
{isOpen && (
72
+
<ImageGallery
73
+
items={images}
74
+
startIndex={currentIndex}
75
+
onClose={closeLightbox}
76
+
showThumbnails={false}
77
+
showPlayButton={false}
78
+
showFullscreenButton={false}
79
+
/>
80
+
)}
46
81
</>
47
82
);
48
83
};