Add additional disclaimer for the frontend ui type

supertokens · Nov 20, 2024 · b9e8e31 · b9e8e31
1 parent d5c03c8
commit b9e8e31
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 6 deletions.
diff --git a/v2/emailpassword/quickstart/frontend-setup.mdx b/v2/emailpassword/quickstart/frontend-setup.mdx
@@ -20,7 +20,7 @@ import FrontendCustomUIEmailPasswordSingIn from '../../community/reusableMD/cust
 import FrontendSDKInstall from "../../community/reusableMD/frontend-sdk-install.mdx"
 
 
-import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
+import {CustomUILink, PrebuiltUILink, PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
 import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs"
 import FrontendMobileSubTabs from "/src/components/tabs/FrontendMobileSubTabs"
 import PreBuiltUIInjector from "/src/components/prebuiltuiInjector"
@@ -46,6 +46,9 @@ Start the setup by configuring your frontend application to use **SuperTokens**
 
 <PreBuiltUIContent>
 
+This guide uses the **SuperTokens Pre Built UI** components.
+If you want to create your own interface please check the <CustomUILink>**Custom UI** tutorial</CustomUILink>.
+
 ## 1. Install the SDK
 
 <!-- COPY SECTION -->
@@ -666,6 +669,9 @@ To review all the components of our pre-built UI please follow [this link](https
 
 <CustomUIContent>
 
+This guide shows you how to create your own UI on top of the **SuperTokens SDK**.
+If you want to use our **Pre Built Components** please check <PrebuiltUILink>the following tutorial</PrebuiltUILink>.
+
 ## 1. Install the SDK
 
 <FrontendCustomUISDKInstall />

diff --git a/v2/passwordless/quickstart/frontend-setup.mdx b/v2/passwordless/quickstart/frontend-setup.mdx
@@ -20,7 +20,7 @@ import FrontendCustomUIPasswordless from '../../community/reusableMD/custom-ui/f
 import FrontendSDKInstall from "../../community/reusableMD/frontend-sdk-install.mdx"
 
 
-import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
+import {CustomUILink, PrebuiltUILink, PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
 import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs"
 import FrontendMobileSubTabs from "/src/components/tabs/FrontendMobileSubTabs"
 import PreBuiltUIInjector from "/src/components/prebuiltuiInjector"
@@ -47,6 +47,9 @@ Start the setup by configuring your frontend application to use **SuperTokens**
 
 <PreBuiltUIContent>
 
+This guide uses the **SuperTokens Pre Built UI** components.
+If you want to create your own interface please check the <CustomUILink>**Custom UI** tutorial</CustomUILink>.
+
 ## 1. Install the SDK
 
 <!-- COPY SECTION -->
@@ -693,6 +696,9 @@ To review all the components of our pre-built UI please follow [this link](https
 
 <CustomUIContent>
 
+This guide shows you how to create your own UI on top of the **SuperTokens SDK**.
+If you want to use our **Pre Built Components** please check <PrebuiltUILink>the following tutorial</PrebuiltUILink>.
+
 ## 1. Install the SDK
 
 <FrontendCustomUISDKInstall />

diff --git a/v2/src/components/preBuiltOrCustomUISwitcher/index.tsx b/v2/src/components/preBuiltOrCustomUISwitcher/index.tsx
@@ -35,6 +35,22 @@ export function updateUIMode(
   window.dispatchEvent(new Event("uiModeChanged"));
 }
 
+export function PrebuiltUILink({ children }: React.PropsWithChildren<{}>) {
+  return (
+    <a style={{ cursor: "pointer" }} onClick={() => updateUIMode("prebuilt")}>
+      {children}
+    </a>
+  );
+}
+
+export function CustomUILink({ children }: React.PropsWithChildren<{}>) {
+  return (
+    <a style={{ cursor: "pointer" }} onClick={() => updateUIMode("custom")}>
+      {children}
+    </a>
+  );
+}
+
 export function PreBuiltOrCustomUISwitcher(props: any) {
   let [uiMode, setUIMode] = useState(getUIModeFromStorage());
 

diff --git a/v2/thirdparty/quickstart/frontend-setup.mdx b/v2/thirdparty/quickstart/frontend-setup.mdx
@@ -19,7 +19,7 @@ import FrontendCustomUIThirdParty from '../../community/reusableMD/custom-ui/fro
 import FrontendSDKInstall from "../../community/reusableMD/frontend-sdk-install.mdx"
 
 
-import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
+import {CustomUILink, PrebuiltUILink, PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
 import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs"
 import FrontendMobileSubTabs from "/src/components/tabs/FrontendMobileSubTabs"
 import PreBuiltUIInjector from "/src/components/prebuiltuiInjector"
@@ -43,6 +43,9 @@ Start the setup by configuring your frontend application to use **SuperTokens**
 
 <PreBuiltUIContent>
 
+This guide uses the **SuperTokens Pre Built UI** components.
+If you want to create your own interface please check the <CustomUILink>**Custom UI** tutorial</CustomUILink>.
+
 ## 1. Install the SDK
 
 <!-- COPY SECTION -->
@@ -691,6 +694,9 @@ To review all the components of our pre-built UI please follow [this link](https
 
 <CustomUIContent>
 
+This guide shows you how to create your own UI on top of the **SuperTokens SDK**.
+If you want to use our **Pre Built Components** please check <PrebuiltUILink>the following tutorial</PrebuiltUILink>.
+
 ## 1. Install the SDK
 
 <FrontendCustomUISDKInstall />

diff --git a/v2/thirdpartyemailpassword/quickstart/frontend-setup.mdx b/v2/thirdpartyemailpassword/quickstart/frontend-setup.mdx
@@ -21,7 +21,7 @@ import FrontendCustomUIEmailPasswordSingIn from '../../community/reusableMD/cust
 import FrontendSDKInstall from "../../community/reusableMD/frontend-sdk-install.mdx"
 
 
-import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
+import {CustomUILink, PrebuiltUILink, PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
 import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs"
 import FrontendMobileSubTabs from "/src/components/tabs/FrontendMobileSubTabs"
 import PreBuiltUIInjector from "/src/components/prebuiltuiInjector"
@@ -45,6 +45,9 @@ Start the setup by configuring your frontend application to use **SuperTokens**
 
 <PreBuiltUIContent>
 
+This guide uses the **SuperTokens Pre Built UI** components.
+If you want to create your own interface please check the <CustomUILink>**Custom UI** tutorial</CustomUILink>.
+
 ## 1. Install the SDK
 
 <!-- COPY SECTION -->
@@ -691,14 +694,16 @@ You can check the login UI by visiting the `^{form_websiteBasePath}` route, in y
 To review all the components of our pre-built UI please follow [this link](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/auth-page--playground).
 
 
-
 </AppInfoForm>
 
 
 </PreBuiltUIContent>
 
 <CustomUIContent>
 
+This guide shows you how to create your own UI on top of the **SuperTokens SDK**.
+If you want to use our **Pre Built Components** please check <PrebuiltUILink>the following tutorial</PrebuiltUILink>.
+
 ## 1. Install the SDK
 
 <FrontendCustomUISDKInstall />

diff --git a/v2/thirdpartypasswordless/quickstart/frontend-setup.mdx b/v2/thirdpartypasswordless/quickstart/frontend-setup.mdx
@@ -19,7 +19,7 @@ import FrontendCustomUIThirdParty from '../../community/reusableMD/custom-ui/fro
 import FrontendCustomUIPasswordless from '../../community/reusableMD/custom-ui/frontend-custom-ui-passwordless.mdx'
 import FrontendSDKInstall from "../../community/reusableMD/frontend-sdk-install.mdx"
 
-import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
+import {CustomUILink, PrebuiltUILink, PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
 import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs"
 import FrontendMobileSubTabs from "/src/components/tabs/FrontendMobileSubTabs"
 import PreBuiltUIInjector from "/src/components/prebuiltuiInjector"
@@ -46,6 +46,9 @@ Start the setup by configuring your frontend application to use **SuperTokens**
 
 <PreBuiltUIContent>
 
+This guide uses the **SuperTokens Pre Built UI** components.
+If you want to create your own interface please check the <CustomUILink>**Custom UI** tutorial</CustomUILink>.
+
 ## 1. Install the SDK
 
 <!-- COPY SECTION -->
@@ -739,6 +742,9 @@ To review all the components of our pre-built UI please follow [this link](https
 
 <CustomUIContent>
 
+This guide shows you how to create your own UI on top of the **SuperTokens SDK**.
+If you want to use our **Pre Built Components** please check <PrebuiltUILink>the following tutorial</PrebuiltUILink>.
+
 ## 1. Install the SDK
 
 <FrontendCustomUISDKInstall />