diff --git a/packages/web/src/components/AuthBranding.tsx b/packages/web/src/components/AuthBranding.tsx new file mode 100644 index 0000000..de9679c --- /dev/null +++ b/packages/web/src/components/AuthBranding.tsx @@ -0,0 +1,49 @@ +import { useI18n } from '../lib/i18n'; + +export default function AuthBranding() { + const { t } = useI18n(); + + return ( +
+ {/* Decorative circles */} +
+
+ +
+ {/* Logo */} +
+ + + + + +
+ + {/* Product name */} +

+ {t('auth.productName')} +

+ + {/* Slogan */} +

+ {t('auth.slogan')} +

+ + {/* Feature highlights */} +
+ {['auth.feature1', 'auth.feature2', 'auth.feature3'].map((key) => ( +
+
+ + + +
+ {t(key)} +
+ ))} +
+
+
+ ); +} diff --git a/packages/web/src/components/OAuthButtons.tsx b/packages/web/src/components/OAuthButtons.tsx new file mode 100644 index 0000000..0de29ee --- /dev/null +++ b/packages/web/src/components/OAuthButtons.tsx @@ -0,0 +1,60 @@ +import { useI18n } from '../lib/i18n'; + +const API_BASE = '/api'; + +function GoogleIcon() { + return ( + + + + + + + ); +} + +function GitHubIcon() { + return ( + + + + ); +} + +function AppleIcon() { + return ( + + + + ); +} + +export default function OAuthButtons() { + const { t } = useI18n(); + + const handleOAuth = (provider: string) => { + window.location.href = `${API_BASE}/auth/oauth/${provider}`; + }; + + const buttons = [ + { provider: 'google', icon: GoogleIcon, label: t('auth.oauth.google') }, + { provider: 'github', icon: GitHubIcon, label: t('auth.oauth.github') }, + { provider: 'apple', icon: AppleIcon, label: t('auth.oauth.apple') }, + ]; + + return ( +
+ {buttons.map(({ provider, icon: Icon, label }) => ( + + ))} +
+ ); +}