feat: oneclient onbaording language page (#370)
* feat: oneclient onbaording language page * Update apps/oneclient/frontend/src/routes/onboarding/language.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update apps/oneclient/frontend/src/routes/onboarding/language.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Jacob
GitHub
parent
0e12968b9c
commit
3e06a33c6d
3 changed files with 96 additions and 13 deletions
|
|
@ -0,0 +1,38 @@
|
|||
<svg width="319" height="277" viewBox="0 0 319 277" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M123.043 246.222C190.998 246.222 246.086 191.104 246.086 123.111C246.086 55.1187 190.998 0 123.043 0C55.0882 0 0 55.1187 0 123.111C0 191.104 55.0882 246.222 123.043 246.222Z" fill="url(#paint0_linear_3343_6724)"/>
|
||||
<mask id="mask0_3343_6724" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="247" height="247">
|
||||
<path d="M123.043 246.222C190.998 246.222 246.086 191.104 246.086 123.111C246.086 55.1187 190.998 0 123.043 0C55.0882 0 0 55.1187 0 123.111C0 191.104 55.0882 246.222 123.043 246.222Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_3343_6724)">
|
||||
<path opacity="0.77" d="M206.791 198.326C203.4 187.661 211.376 176.767 203.959 159.122C196.542 141.478 190.524 145.731 184.325 134.945C178.126 124.159 185.887 120.568 179.165 115.976C175.679 113.595 172.615 115.463 169.434 117.33C166.478 119.064 163.422 120.799 159.83 119.132C152.369 115.668 153.317 106.251 147.467 100.365C141.616 94.4799 107.864 101.061 109.737 86.285C111.61 71.5094 161.369 52.1559 168.568 52.1604C175.768 52.165 179.291 64.7588 191.038 66.9406C196.782 68.0075 203.408 65.3447 209.862 62.6739C216.61 59.8868 223.172 57.1008 228.346 58.577C238.469 61.4656 318.417 137.044 318.417 137.044L233.795 216.383C217.533 201.777 210.185 208.99 206.791 198.326ZM89.7868 209.651C81.1954 208.398 67.3428 194.749 59.86 181.648C52.3772 168.547 64.3032 163.962 59.86 157.254C55.4168 150.546 41.7636 140.598 39.9088 136.735C38.0541 132.873 45.6577 126.269 39.9088 118.155C34.16 110.041 25.776 118.292 16.9089 104.291C8.04187 90.2907 4.43945 62.1518 4.43945 62.1518L67.6197 -12.4319L79.4945 6.62298L96.3616 18.6457C96.3616 18.6457 120.111 31.7969 119.16 40.8023C118.209 49.8076 94.4248 52.8979 92.5586 54.6637C90.6925 56.4294 92.9004 63.8138 84.2419 71.2996C75.5833 78.7855 65.0563 75.3201 57.9198 84.607C57.9198 84.607 56.8386 90.2679 56.2849 96.2342C55.7312 102.201 55.7073 108.452 55.7073 108.452C57.7979 111.522 60.5891 110.014 64.2223 108.504C67.8134 107.014 72.2247 105.522 77.5975 108.452C88.4037 114.344 98.9341 132.02 98.9341 132.02C98.9341 132.02 123.043 133.197 125.814 140.613C128.586 148.03 111.874 158.585 110.016 161.686C108.158 164.787 111.47 169.527 107.522 175.765C103.574 182.003 99.2782 177.835 94.222 186.639C89.3595 195.105 97.6911 209.721 90.6993 209.722C90.3938 209.721 90.0889 209.697 89.7868 209.651Z" fill="url(#paint1_linear_3343_6724)" fill-opacity="0.8"/>
|
||||
</g>
|
||||
<g filter="url(#filter0_d_3343_6724)">
|
||||
<path d="M284.821 104.872H173.171C158.7 104.872 146.968 116.611 146.968 131.09V242.802C146.968 257.282 158.7 269.02 173.171 269.02H284.821C299.293 269.02 311.025 257.282 311.025 242.802V131.09C311.025 116.611 299.293 104.872 284.821 104.872Z" fill="url(#paint2_linear_3343_6724)"/>
|
||||
<path d="M284.821 105.442H173.171C159.014 105.442 147.537 116.925 147.537 131.091V242.802C147.537 256.968 159.014 268.451 173.171 268.451H284.821C298.978 268.451 310.455 256.968 310.455 242.802V131.091C310.455 116.925 298.978 105.442 284.821 105.442Z" stroke="white" stroke-opacity="0.5"/>
|
||||
</g>
|
||||
<path d="M266.21 220.077L240.946 150.478C239.852 147.628 238.43 146.867 235.258 146.867H222.79C219.618 146.867 218.196 147.524 217.103 150.697L191.947 220.077C190.853 223.032 191.514 224.564 194.9 224.564H206.384C211.853 224.564 213.275 223.36 214.368 219.968L216.884 212.088H240.503L243.019 219.968C243.899 223.36 245.539 224.564 251.226 224.564H263.039C266.32 224.564 267.304 223.032 266.21 220.077ZM231.54 182.104L235.586 194.908H221.915L225.962 181.995C227.325 177.039 228.024 171.924 228.04 166.784H229.133C229.356 171.965 230.163 177.104 231.54 182.104Z" fill="#2B4BFF" fill-opacity="0.76"/>
|
||||
<defs>
|
||||
<filter id="filter0_d_3343_6724" x="138.968" y="96.8723" width="176.058" height="176.148" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-2" dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="3"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.078 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3343_6724"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3343_6724" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_3343_6724" x1="63.244" y1="2.78205e-06" x2="195.749" y2="233.109" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#7A64FF"/>
|
||||
<stop offset="0.481" stop-color="#415EFF"/>
|
||||
<stop offset="1" stop-color="#2B4BFF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_3343_6724" x1="102.401" y1="-12.4319" x2="134.26" y2="220.105" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#EAF6FF"/>
|
||||
<stop offset="1" stop-color="#C6E1F5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_3343_6724" x1="190.607" y1="102.082" x2="254.159" y2="268.997" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C8D6F5"/>
|
||||
<stop offset="1" stop-color="#B6CCFC"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5 KiB |
|
|
@ -254,16 +254,8 @@ export type VersionType =
|
|||
*/
|
||||
"old_beta"
|
||||
|
||||
const ARGS_MAP = { 'events':'{"ingress":["event"],"message":["event"],"process":["event"]}', 'oneclient':'{"getClustersGroupedByMajor":[],"openDevTools":[],"getBundlesFor":["cluster_id"]}', 'core':'{"updateClusterProfile":["name","profile"],"updateClusterById":["id","request"],"getLogByName":["id","name"],"killProcess":["pid"],"getUsers":[],"getPackage":["provider","slug"],"removeCluster":["id"],"launchCluster":["id","uuid"],"getPackageVersions":["provider","slug","mc_version","loader","offset","limit"],"getProfileOrDefault":["name"],"uploadSkinBytes":["access_token","skin_data","image_format","skin_variant"],"changeCape":["access_token","cape_uuid"],"changeSkin":["access_token","skin_url","skin_variant"],"getPackageBody":["provider","body"],"installModpack":["modpack","cluster_id"],"getWorlds":["id"],"removeUser":["uuid"],"convertUsernameUUID":["username_uuid"],"writeSettings":["setting"],"getGameVersions":[],"getClusterById":["id"],"getLoadersForVersion":["mc_version"],"getScreenshots":["id"],"getMultiplePackages":["provider","slugs"],"downloadPackage":["provider","package_id","version_id","cluster_id","skip_compatibility"],"getUsersFromAuthor":["provider","author"],"openMsaLogin":[],"getDefaultUser":["fallback"],"getUser":["uuid"],"getRunningProcessesByClusterId":["cluster_id"],"getGlobalProfile":[],"createSettingsProfile":["name"],"setDefaultUser":["uuid"],"getClusters":[],"removeCape":["access_token"],"searchPackages":["provider","query"],"isClusterRunning":["cluster_id"],"getLogs":["id"],"fetchLoggedInProfile":["access_token"],"open":["input"],"fetchMinecraftProfile":["uuid"],"readSettings":[],"getRunningProcesses":[],"createCluster":["options"]}', 'folders':'{"openCluster":["folder_name"],"fromCluster":["folder_name"]}' }
|
||||
export type Router = { 'oneclient': { openDevTools: () => Promise<void>,
|
||||
getClustersGroupedByMajor: () => Promise<Partial<{ [key in number]: ClusterModel[] }>>,
|
||||
getBundlesFor: (clusterId: number) => Promise<ModpackArchive[]> },
|
||||
'events': { ingress: (event: IngressPayload) => Promise<void>,
|
||||
message: (event: MessagePayload) => Promise<void>,
|
||||
process: (event: ProcessPayload) => Promise<void> },
|
||||
'folders': { fromCluster: (folderName: string) => Promise<string>,
|
||||
openCluster: (folderName: string) => Promise<null> },
|
||||
'core': { getClusters: () => Promise<ClusterModel[]>,
|
||||
const ARGS_MAP = { 'core':'{"getDefaultUser":["fallback"],"fetchLoggedInProfile":["access_token"],"changeSkin":["access_token","skin_url","skin_variant"],"getClusterById":["id"],"launchCluster":["id","uuid"],"getUsers":[],"updateClusterProfile":["name","profile"],"getWorlds":["id"],"getPackageVersions":["provider","slug","mc_version","loader","offset","limit"],"getClusters":[],"getLogByName":["id","name"],"setDefaultUser":["uuid"],"open":["input"],"openMsaLogin":[],"removeCluster":["id"],"searchPackages":["provider","query"],"getGlobalProfile":[],"updateClusterById":["id","request"],"isClusterRunning":["cluster_id"],"downloadPackage":["provider","package_id","version_id","cluster_id","skip_compatibility"],"installModpack":["modpack","cluster_id"],"fetchMinecraftProfile":["uuid"],"getRunningProcesses":[],"getUser":["uuid"],"killProcess":["pid"],"removeUser":["uuid"],"getRunningProcessesByClusterId":["cluster_id"],"convertUsernameUUID":["username_uuid"],"uploadSkinBytes":["access_token","skin_data","image_format","skin_variant"],"getScreenshots":["id"],"getPackageBody":["provider","body"],"changeCape":["access_token","cape_uuid"],"removeCape":["access_token"],"getMultiplePackages":["provider","slugs"],"getLoadersForVersion":["mc_version"],"getPackage":["provider","slug"],"getUsersFromAuthor":["provider","author"],"readSettings":[],"createCluster":["options"],"createSettingsProfile":["name"],"writeSettings":["setting"],"getLogs":["id"],"getGameVersions":[],"getProfileOrDefault":["name"]}', 'events':'{"message":["event"],"process":["event"],"ingress":["event"]}', 'oneclient':'{"openDevTools":[],"getClustersGroupedByMajor":[],"getBundlesFor":["cluster_id"]}', 'folders':'{"fromCluster":["folder_name"],"openCluster":["folder_name"]}' }
|
||||
export type Router = { 'core': { getClusters: () => Promise<ClusterModel[]>,
|
||||
getClusterById: (id: number) => Promise<ClusterModel | null>,
|
||||
removeCluster: (id: number) => Promise<null>,
|
||||
createCluster: (options: CreateCluster) => Promise<ClusterModel>,
|
||||
|
|
@ -306,7 +298,15 @@ changeSkin: (accessToken: string, skinUrl: string, skinVariant: SkinVariant) =>
|
|||
changeCape: (accessToken: string, capeUuid: string) => Promise<MojangFullPlayerProfile>,
|
||||
removeCape: (accessToken: string) => Promise<MojangFullPlayerProfile>,
|
||||
convertUsernameUUID: (usernameUuid: string) => Promise<MowojangProfile>,
|
||||
open: (input: string) => Promise<null> } };
|
||||
open: (input: string) => Promise<null> },
|
||||
'events': { ingress: (event: IngressPayload) => Promise<void>,
|
||||
message: (event: MessagePayload) => Promise<void>,
|
||||
process: (event: ProcessPayload) => Promise<void> },
|
||||
'folders': { fromCluster: (folderName: string) => Promise<string>,
|
||||
openCluster: (folderName: string) => Promise<null> },
|
||||
'oneclient': { openDevTools: () => Promise<void>,
|
||||
getClustersGroupedByMajor: () => Promise<Partial<{ [key in number]: ClusterModel[] }>>,
|
||||
getBundlesFor: (clusterId: number) => Promise<ModpackArchive[]> } };
|
||||
|
||||
|
||||
export type { InferCommandOutput }
|
||||
|
|
|
|||
|
|
@ -1,13 +1,58 @@
|
|||
import Illustration from '@/assets/illustrations/onboarding/language.svg';
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
|
||||
export const Route = createFileRoute('/onboarding/language')({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
// placeholder
|
||||
interface Language {
|
||||
lang: string;
|
||||
code: string;
|
||||
percentage: number;
|
||||
}
|
||||
|
||||
// placeholder
|
||||
const languageList: Array<Language> = [
|
||||
{
|
||||
lang: 'English',
|
||||
code: 'en',
|
||||
percentage: 100,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<div>
|
||||
Hello "/onboarding/language"!
|
||||
<div className='flex flex-row h-full p-24 pt-48 gap-8'>
|
||||
<div className='h-full w-1/3'>
|
||||
<img src={Illustration} alt="Language selection illustration" />
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col w-2/3'>
|
||||
<h1 className="text-4xl font-semibold mb-2">Language</h1>
|
||||
<p className="text-slate-400 text-lg mb-2">Choose your preferred language.</p>
|
||||
|
||||
<div className="my-4 flex flex-col gap-y-2 rounded-lg bg-page-elevated">
|
||||
<div className="flex flex-col gap-y-1 p-2">
|
||||
{languageList.map(lang => (
|
||||
<div className="flex flex-row items-center rounded-lg px-6 py-5" key={lang.lang}>
|
||||
<div className="flex-1 font-medium text-lg ">
|
||||
<p>{lang.lang}</p>
|
||||
</div>
|
||||
<div className="flex-1 text-right text-sm">
|
||||
<p>{lang.percentage}%</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full flex flex-row justify-end">
|
||||
<p className="text-xs">Help translate OneClient</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue