✏️ added eng to gj auth conversions

iYojna · Oct 15, 2022 · fe71b56 · fe71b56
1 parent 75fcde9
commit fe71b56
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 45 deletions.
diff --git a/components/AuthHeader.tsx b/components/AuthHeader.tsx
@@ -3,8 +3,12 @@ import { Typography, Layout } from 'antd'
 
 const { Title, Text } = Typography
 const { Header } = Layout
+import useLangStore from '../utils/store'
+import langSt from "../utils/uiText.json";
 
 const AuthHeader = () => {
+
+	const language = useLangStore((state) => state.language)
 	return (
 		<Header
 			style={{
@@ -25,8 +29,8 @@ const AuthHeader = () => {
 					color: '#000000D9',
 				}}
 			>
-				iYojna
-			</Title>
+				{language === "gj" ? langSt.gj.iYojna : langSt.en.iYojna}
+			</Title>	
 			<Text
 				style={{
 					fontFamily: 'Roboto',
@@ -39,8 +43,7 @@ const AuthHeader = () => {
 					textAlign: 'center',
 				}}
 			>
-				One stop destination for citizens to find and understand all the
-				government schemes applicable to them.
+				{language === "gj" ? langSt.gj.introText : langSt.en.introText}
 			</Text>
 		</Header>
 	)

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -8,18 +8,27 @@ import {
 } from '@ant-design/icons'
 import { Dropdown, Menu as AntDMenu, Space } from 'antd'
 import { useRouter } from 'next/router'
+import useLangStore from '../utils/store'
+import langSt from '../utils/uiText.json'
 
 const LanguageMenu = () => {
+	const setLanguage = useLangStore((state) => state.setLanguage);
+
+
 	return (
-		<AntDMenu>
+		<AntDMenu onClick={(val) => {
+			val.key === "tmp_key-0" ? setLanguage("en") : setLanguage("gj");
+		}}>
 			<AntDMenu.Item>English</AntDMenu.Item>
 			<AntDMenu.Item>ગુજરાતી</AntDMenu.Item>
 		</AntDMenu>
 	)
 }
 
 const Menu = () => {
-	const router = useRouter()
+	const router = useRouter();
+
+
 	return (
 		<AntDMenu
 			items={[
@@ -41,6 +50,7 @@ const Menu = () => {
 }
 
 const CustomHeader = () => {
+	const language = useLangStore((state) => state.language);
 	return (
 		<div className={styles.custom__header__wrapper}>
 			<div className={styles.custom__part__2}>
@@ -55,7 +65,7 @@ const CustomHeader = () => {
 					>
 						<a onClick={(e) => e.preventDefault()}>
 							<Space>
-								Dhruv Dave
+								{language === "gj" ? langSt.gj.name : langSt.en.name}
 								<DownOutlined />
 							</Space>
 						</a>
@@ -67,7 +77,7 @@ const CustomHeader = () => {
 					>
 						<a onClick={(e) => e.preventDefault()}>
 							<Space>
-								Language
+								{language !== "gj" ? langSt.gj.language : langSt.en.language}
 								<DownOutlined />
 							</Space>
 						</a>

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -11,27 +11,18 @@ import { Layout, Menu } from 'antd'
 const { Content, Sider } = Layout
 import styles from '../styles/Components/Layout.module.css'
 import CustomHeader from '../components/Header'
+import langSt from "../utils/uiText.json";
+import useLangStore from '../utils/store'
 
 interface IProps {
 	children: React.ReactNode
 }
 
-const items1 = ['1', '2', '3'].map((key) => ({
-	key,
-	label: `nav ${key}`,
-}))
-
-const items2 = [
-	UserOutlined,
-	LaptopOutlined,
-	NotificationOutlined,
-	LaptopOutlined,
-	NotificationOutlined,
-]
-
 const CustomLayout = ({ children }: IProps) => {
 	const router = useRouter()
 	const [collapsed, setCollapsed] = useState(false)
+
+	const language = useLangStore((state) => state.language);
 
 	const navItems = React.useMemo(
 		() => [
@@ -87,7 +78,7 @@ const CustomLayout = ({ children }: IProps) => {
 						}}
 					>
 						<p className={styles.side__panel__title}>
-							{collapsed ? 'iY' : 'iYojna'}
+							{collapsed ? 'iY' : language === "gj" ? langSt.gj.iYojna : langSt.en.iYojna}
 						</p>
 					</div>
 

diff --git a/components/Login.tsx b/components/Login.tsx
@@ -4,7 +4,8 @@ import React from 'react'
 import { UserOutlined, LockOutlined } from '@ant-design/icons'
 
 const { Option } = Select
-
+import useLangStore from '../utils/store'
+import langSt from "../utils/uiText.json";
 // const layout = {
 // 	labelCol: { span: 8 },
 // 	wrapperCol: { span: 16 },
@@ -15,7 +16,8 @@ const { Option } = Select
 
 const Login = () => {
 	const [form] = Form.useForm()
-
+	const language = useLangStore((state) => state.language)
+	// console.log("LANG: ", language);
 	const onFinish = (values: any) => {
 		console.log(values)
 	}
@@ -26,10 +28,10 @@ const Login = () => {
 
 	return (
 		<Form form={form} name="control-hooks" onFinish={onFinish}>
-			<Form.Item name="email" rules={[{ required: true }]}>
+			<Form.Item name={language === "gj" ? langSt.gj.email : langSt.en.email} rules={[{ required: true }]}>
 				<Input
 					size="large"
-					placeholder="Email"
+					placeholder={language === "gj" ? langSt.gj.email : langSt.en.email}
 					style={{ marginTop: '4%' }}
 					prefix={
 						<UserOutlined
@@ -41,10 +43,10 @@ const Login = () => {
 					}
 				/>
 			</Form.Item>
-			<Form.Item name="password" rules={[{ required: true }]}>
+			<Form.Item name={language === "gj" ? langSt.gj.password : langSt.en.password} rules={[{ required: true }]}>
 				<Input.Password
 					size="large"
-					placeholder="Password"
+					placeholder={language === "gj" ? langSt.gj.password : langSt.en.password}
 					prefix={
 						<LockOutlined
 							style={{
@@ -66,14 +68,14 @@ const Login = () => {
 						borderRadius: '5px',
 					}}
 				>
-					Login
+					{language === "gj" ? langSt.gj.login : langSt.en.login}
 				</Button>
 				<Button
 					htmlType="button"
 					onClick={onReset}
 					style={{ width: '6vw', marginTop: '0.8rem', borderRadius: '5px' }}
 				>
-					Reset
+					{language === "gj" ? langSt.gj.reset : langSt.en.reset}
 				</Button>
 			</Form.Item>
 		</Form>

diff --git a/components/SignUp.tsx b/components/SignUp.tsx
@@ -2,7 +2,8 @@ import { Button, Form, Input, Radio } from 'antd'
 import React from 'react'
 
 import { UserOutlined, LockOutlined } from '@ant-design/icons'
-
+import langSt from "../utils/uiText.json";
+import useLangStore from '../utils/store';
 const SignUp = () => {
 	const [form] = Form.useForm()
 
@@ -14,12 +15,14 @@ const SignUp = () => {
 		form.resetFields()
 	}
 
+	const language = useLangStore((state) => state.language)
+
 	return (
 		<Form form={form} name="control-hooks" onFinish={onFinish}>
-			<Form.Item name="email" rules={[{ required: true }]}>
+			<Form.Item name={language === "gj" ? langSt.gj.email : langSt.en.email} rules={[{ required: true }]}>
 				<Input
 					size="large"
-					placeholder="Email"
+					placeholder={language === "gj" ? langSt.gj.email : langSt.en.email}
 					style={{ marginTop: '4%' }}
 					prefix={
 						<UserOutlined
@@ -31,10 +34,10 @@ const SignUp = () => {
 					}
 				/>
 			</Form.Item>
-			<Form.Item name="password" rules={[{ required: true }]}>
+			<Form.Item name={language === "gj" ? langSt.gj.password : langSt.en.password} rules={[{ required: true }]}>
 				<Input.Password
 					size="large"
-					placeholder="Password (6 characters atleast, case sensitive)"
+					placeholder={language === "gj" ? langSt.gj.passPlaceholder : langSt.en.passPlaceholder}
 					prefix={
 						<LockOutlined
 							style={{
@@ -45,10 +48,10 @@ const SignUp = () => {
 					}
 				/>
 			</Form.Item>
-			<Form.Item name="confirm-password" rules={[{ required: true }]}>
+			<Form.Item name={language === "gj" ? langSt.gj.confirmPassword : langSt.en.confirmPassword} rules={[{ required: true }]}>
 				<Input.Password
 					size="large"
-					placeholder="Confirm password"
+					placeholder={language === "gj" ? langSt.gj.confirmPassword : langSt.en.confirmPassword}
 					prefix={
 						<LockOutlined
 							style={{
@@ -71,14 +74,14 @@ const SignUp = () => {
 						borderRadius: '5px',
 					}}
 				>
-					Sign Up
+					{language === "gj" ? langSt.gj.signUp : langSt.en.signUp}
 				</Button>
 				<Button
 					htmlType="button"
 					onClick={onReset}
 					style={{ width: '6vw', marginTop: '0.8rem', borderRadius: '5px' }}
 				>
-					Reset
+					{language === "gj" ? langSt.gj.reset : langSt.en.reset}
 				</Button>
 			</Form.Item>
 		</Form>

diff --git a/pages/auth.tsx b/pages/auth.tsx
@@ -9,12 +9,19 @@ import SignUp from '../components/SignUp'
 // const { Content } = Layout
 const { Title } = Typography
 const { TabPane } = Tabs
+import useLangStore from '../utils/store'
+import langSt from "../utils/uiText.json";
+
 import CustomLayout from '../components/Layout'
 const onChange = (key: string) => {
 	console.log(key)
 }
 
 const Auth = () => {
+	const language = useLangStore((state) => state.language)
+	const tab1 = language === "gj" ? langSt.gj.login : langSt.en.login
+	const tab2 = language === "gj" ? langSt.gj.signUp : langSt.en.signUp
+
 	return (
 		<div>
 			<AuthHeader />
@@ -24,10 +31,10 @@ const Auth = () => {
 				onChange={onChange}
 				style={{ width: '30vw', margin: '2% auto 10% auto' }}
 			>
-				<TabPane tab="Login" key="1">
+				<TabPane tab={tab1} key="1">
 					<Login />
 				</TabPane>
-				<TabPane tab="Sign Up" key="2">
+				<TabPane tab={tab2} key="2">
 					<SignUp />
 				</TabPane>
 			</Tabs>

diff --git a/utils/store.js b/utils/store.js
@@ -1,8 +1,8 @@
 import create from 'zustand'
 
-const useFormStore = create((set) => ({
+const useLangStore = create((set) => ({
 	language: "en",
     setLanguage: (newLanguage) => set(() => ({ language: newLanguage })),
 }))
 
-export default useFormStore
+export default useLangStore
diff --git a/utils/uiText.json b/utils/uiText.json
@@ -1,8 +1,32 @@
 {
     "en":{
-        "splashHeading": "Shishya Admin Page"
+        "splashHeading": "Shishya Admin Page",
+        "email": "Email",
+        "password": "Password",
+        "login": "Login",
+        "reset": "Reset",
+        "introText": "One stop destination for citizens to find and understand all the government schemes applicable to them.",
+        "iYojna": "iYojna",
+        "name": "Dhruv Dave",
+        "language": "Language",
+        "iY": "iY",
+        "passPlaceholder": "Password (6 characters atleast, case sensitive)",
+        "confirmPassword": "Confirm Password",
+        "signUp": "Sign Up"
     },
     "gj":{
-
+        "splashHeading": "શિષ્ય એડમિન પેજ",
+        "email": "ઇમેઇલ",
+        "password": "પાસવર્ડ",
+        "login": "પ્રવેશ કરો",
+        "reset": "રીસેટ",
+        "introText": "નાગરિકો માટે તમામ શોધવા અને સમજવા માટે વન સ્ટોપ ડેસ્ટિનેશન તેમને લાગુ પડતી સરકારી યોજનાઓ.",
+        "iYojna": "ઈ-યોજના",
+        "name": "ધ્રુવ દવે",
+        "language": "ભાષા",
+        "iY": "ઈ-યો",
+        "passPlaceholder": "પાસવર્ડ (ઓછામાં ઓછા 6 અક્ષરો, કેસ સંવેદનશીલ)",
+        "confirmPassword": "પાસવર્ડની પુષ્ટિ કરો",
+        "signUp": "સાઇન અપ"
     }
 }