@igamingcareer/igaming-components 1.0.61 → 1.0.63
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Readme.md +41 -0
- package/dist/index.js +1559 -1559
- package/dist/index.mjs +13772 -13637
- package/package.json +1 -1
package/Readme.md
CHANGED
|
@@ -69,6 +69,47 @@ export function Example() {
|
|
|
69
69
|
}
|
|
70
70
|
```
|
|
71
71
|
|
|
72
|
+
### Sign-in prompt modal for gated actions
|
|
73
|
+
|
|
74
|
+
Use the `SignInPromptModal` to nudge unauthenticated users to log in or create an account before performing actions such as
|
|
75
|
+
saving a job or opening a full job description. The parent app controls when the modal opens and owns the navigation/flows via
|
|
76
|
+
the emitted callbacks.
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import { useState } from "react";
|
|
80
|
+
import { SignInPromptModal } from "@igamingcareer/igaming-components";
|
|
81
|
+
|
|
82
|
+
export function GatedSaveButton() {
|
|
83
|
+
const [open, setOpen] = useState(false);
|
|
84
|
+
|
|
85
|
+
const handleLogin = () => {
|
|
86
|
+
setOpen(false);
|
|
87
|
+
// trigger your app's login flow
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
const handleRegister = () => {
|
|
91
|
+
setOpen(false);
|
|
92
|
+
// trigger your app's register flow
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
return (
|
|
96
|
+
<>
|
|
97
|
+
<button onClick={() => setOpen(true)}>Save job</button>
|
|
98
|
+
|
|
99
|
+
<SignInPromptModal
|
|
100
|
+
open={open}
|
|
101
|
+
onClose={() => setOpen(false)}
|
|
102
|
+
onLogin={handleLogin}
|
|
103
|
+
onRegister={handleRegister}
|
|
104
|
+
appName="iGamingCareer.com"
|
|
105
|
+
attemptedAction="save this job"
|
|
106
|
+
helperContent={<p className="text-sm text-muted-foreground">Create an account to sync saves across devices.</p>}
|
|
107
|
+
/>
|
|
108
|
+
</>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
72
113
|
## Embedding components in plain HTML
|
|
73
114
|
|
|
74
115
|
The library can hydrate elements that carry specific classes or data attributes. Build the project, host the `dist/` output (or publish it to a CDN), and reference the emitted CSS/JS assets from your page.
|