feat(onboarding): add links to examples

Unleash · Sep 30, 2024 · 4832dff · 4832dff
1 parent 6d16fc6
commit 4832dff
Showing 1 changed file with 36 additions and 6 deletions.
diff --git a/frontend/src/component/onboarding/flow/SdkExample.tsx b/frontend/src/component/onboarding/flow/SdkExample.tsx
@@ -1,8 +1,8 @@
 import { type SelectChangeEvent, styled, Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
-import Select from '../../common/select';
-import { useState } from 'react';
-import { allSdks } from '../dialog/sharedTypes';
+import { useLocalStorageState } from 'hooks/useLocalStorageState';
+import Select from 'component/common/select';
+import { allSdks, type SdkName } from '../dialog/sharedTypes';
 
 const TitleContainer = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -18,17 +18,42 @@ const StyledLink = styled(Link)({
     textDecoration: 'none',
 });
 
+const repositoryUrl =
+    'https://github.com/Unleash/unleash-sdk-examples/tree/main';
+const exampleDirectories: Record<SdkName, string> = {
+    Android: 'Android',
+    '.NET': 'Csharp',
+    Flutter: 'Flutter',
+    Go: 'Go',
+    Java: 'Java',
+    JavaScript: 'JavaScript',
+    'Node.js': 'NodeJS',
+    PHP: 'PHP',
+    Python: 'Python',
+    React: 'React',
+    Ruby: 'Ruby',
+    Rust: 'Rust',
+    Svelte: 'Svelte',
+    Swift: 'Swift',
+    Vue: 'Vue',
+};
+
 export const SdkExample = () => {
     const sdkOptions = allSdks.map((sdk) => ({
         key: sdk.name,
         label: sdk.name,
     }));
 
-    const [selectedSdk, setSelectedSdk] = useState<string>(sdkOptions[0].key);
+    const [selectedSdk, setSelectedSdk] = useLocalStorageState<SdkName>(
+        'onboarding-sdk-example',
+        sdkOptions[0].key,
+    );
 
     const onChange = (event: SelectChangeEvent) => {
-        setSelectedSdk(event.target.value);
+        setSelectedSdk(event.target.value as SdkName);
     };
+    const selectedExample = exampleDirectories[selectedSdk];
+
     return (
         <>
             <TitleContainer>View SDK Example</TitleContainer>
@@ -45,7 +70,12 @@ export const SdkExample = () => {
                     width: '60%',
                 }}
             />
-            <StyledLink to={``}>Go to example</StyledLink>
+            <StyledLink
+                to={`${repositoryUrl}/${selectedExample}`}
+                target='_blank'
+            >
+                Go to example
+            </StyledLink>
         </>
     );
 };