feat: import page ui finished

apps/onelauncher/frontend/src/components/content/LauncherIcon.tsx

@@ -0,0 +1,62 @@
+import type { ImgHTMLAttributes, JSX } from 'react';
+import CurseforgeIcon from '../../assets/logos/curseforge.svg';
+import AtLauncherIcon from '../../assets/logos/launchers/atlauncher.svg';
+import FTBIcon from '../../assets/logos/launchers/ftb.svg';
+import GDLauncherImage from '../../assets/logos/launchers/gdlauncher.png';
+import MultiMCImage from '../../assets/logos/launchers/multimc.png';
+import PrismIcon from '../../assets/logos/launchers/prismlauncher.svg';
+import TechnicImage from '../../assets/logos/launchers/technic.png';
+import TLauncherImage from '../../assets/logos/launchers/tlauncher.png';
+import UnknownImage from '../../assets/logos/minecraft.png';
+import ModrinthIcon from '../../assets/logos/modrinth.svg';
+import { Show } from '../base/Show';
+
+type ElementType = (props: any) => JSX.Element;
+
+// i dont know what ImportType is so i assume it is a string
+export function getLauncherLogoElement(launcher: string): ElementType {
+	const providerName = launcher.toLowerCase() as Lowercase<string>;
+
+	const image = (src: string, props: any) => <img {...props} alt={providerName} src={src} />;
+
+	// [provider logo, is svg]
+	const mapping: Record<Lowercase<string>, ElementType | string> = {
+		modrinth: ModrinthIcon,
+		curseforge: CurseforgeIcon,
+		prismlauncher: PrismIcon,
+		atlauncher: AtLauncherIcon,
+		gdlauncher: GDLauncherImage,
+		ftblauncher: FTBIcon,
+		multimc: MultiMCImage,
+		tlauncher: TLauncherImage,
+		technic: TechnicImage,
+		unknown: UnknownImage,
+	};
+
+	const logo = mapping[providerName] || UnknownImage;
+	if (typeof logo === 'function')
+		return logo;
+
+	return props => image(logo, props);
+}
+
+type LauncherIconProps = ImgHTMLAttributes<HTMLImageElement> & {
+	launcher: string | undefined;
+};
+
+function LauncherIcon({
+    launcher,
+    ...props
+}: LauncherIconProps) {
+	return (
+		<Show
+			children={getLauncherLogoElement(launcher!)({ ...props, ...(props.className ? { className: props.className } : {}) })}
+			fallback={(
+				<div className={`bg-border/05 ${props.className || ''}`} {...props} />
+			)}
+			when={launcher !== undefined}
+		/>
+	);
+}
+
+export default LauncherIcon;

apps/onelauncher/frontend/src/routes/onboarding/import.tsx

@@ -1,9 +1,37 @@
 import { createFileRoute } from '@tanstack/react-router'
+import { OnboardingStep } from './route'
+import Illustration from '../../assets/illustrations/onboarding/import_from_others.svg';
+import { LAUNCHER_IMPORT_TYPES } from '@/utils';
+import LauncherIcon from '@/components/content/LauncherIcon';
 
 export const Route = createFileRoute('/onboarding/import')({
   component: RouteComponent,
 })
 
 function RouteComponent() {
-  return <div>Hello "/onboarding/import"!</div>
+  return (
+    <>
+      <OnboardingStep illustration={<img src={Illustration} />} paragraph="Import your profiles from other launchers."
+        title="Import">
+        <div className="h-full w-full flex flex-col gap-y-3">
+          <div className="grid grid-cols-3">
+            {LAUNCHER_IMPORT_TYPES.map((x) => (
+              <button
+                className={`flex flex-col items-center justify-center gap-y-4 rounded-md p-4 active:bg-border/10 hover:bg-border/05`}
+              >
+                <LauncherIcon className="h-16 max-w-22 min-w-16" launcher={x} />
+                <span className="text-lg font-medium">{x}</span>
+              </button>
+            ))}
+          </div>
+          <small className="pt-2 text-fg-secondary">
+            Want to contribute a launcher import? Click
+            {' '}
+            <a href="https://github.com/Polyfrost/OneLauncher">here</a>
+            .
+          </small>
+        </div>
+      </OnboardingStep>
+    </>
+  )
 }

apps/onelauncher/frontend/src/utils/index.ts

@@ -0,0 +1,11 @@
+export const LAUNCHER_IMPORT_TYPES: string[] = [
+	'PrismLauncher',
+	'Curseforge',
+	// 'Modrinth',
+	'ATLauncher',
+	'GDLauncher',
+	// 'FTBLauncher',
+	'MultiMC',
+	// 'TLauncher',
+	// 'Technic'
+] as const;