diff --git a/frontend/src/component/onboarding/flow/SdkExample.tsx b/frontend/src/component/onboarding/flow/SdkExample.tsx index 04c667400ee4..12253f352444 100644 --- 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 = { + 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(sdkOptions[0].key); + const [selectedSdk, setSelectedSdk] = useLocalStorageState( + '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 ( <> View SDK Example @@ -45,7 +70,12 @@ export const SdkExample = () => { width: '60%', }} /> - Go to example + + Go to example + ); };