Trigger Warning based on language

src/pages/homePage.jsx

@@ -50,7 +50,7 @@ function HomePage() {
 
       <div style={{ height: '8vh' }} />
 
-      <BlackButton text="Start" to='/warn' />
+      <BlackButton text="Start" to='/lang' />
     </div>
   );
 }

src/pages/languageSelection.jsx

@@ -28,10 +28,10 @@ function languageSelection() {
             gap: '1rem',
             marginTop: '1rem'
         }}>
-        <BlackButton text="ภาษาไทย" to='/name' onClick={(e) => {
+        <BlackButton text="ภาษาไทย" to='/warn' onClick={(e) => {
             setLang("Thai");
         }}/>
-        <BlackButton text="English" to='/name' onClick={(e) => {
+        <BlackButton text="English" to='/warn' onClick={(e) => {
             setLang("English");
         }}/>
         </div>

src/pages/warningPage.jsx

@@ -4,6 +4,23 @@ import { useNavigate } from 'react-router-dom';
 
 function WarningPage() {
   const navigate = useNavigate();
+  
+  const [lang] = useState(() => {
+        return sessionStorage.getItem("lang") || 'English';
+    });
+
+  const text = {
+        tw: lang === 'Thai' ? 'คำเตือนเนื้อหา' : 'Trigger warning',
+        tw_text: lang === 'Thai' ? 'ทดสอบข้อความตัวอย่าง\nเพื่อใช้ในการจัดวางองค์ประกอบของหน้าเว็บไซต์ หรือสิ่งพิมพ์ โดยข้อความนี้ไม่มีความหมาย' 
+        : 
+        'Lorem ipsum dolor sit amet,\nconsectetur adipiscing elit',
+    }
+          // Lorem ipsum dolor sit amet, <br/>
+          // consectetur adipiscing elit, <br/>
+          // sed do eiusmod tempor <br/>
+          // incididunt ut labore et dolore <br/>
+          // magnam aliquam quaerat <br/>
+          // voluptatem.
 
   return(
   	  <div style={{
@@ -15,19 +32,19 @@ function WarningPage() {
       }}
         onClick={()=>{navigate('/name', { replace: true })}}
       >
-        <label className='title'>Trigger warning</label>
+        <label className='title'>{text.tw}</label>
 
         <div style={{
           height: '8vh'
         }}/>
 
-        <label className='body'>
-          Lorem ipsum dolor sit amet, <br/>
-          consectetur adipiscing elit, <br/>
-          sed do eiusmod tempor <br/>
-          incididunt ut labore et dolore <br/>
-          magnam aliquam quaerat <br/>
-          voluptatem.
+        <label className="body">
+          {text.tw_text.split('\n').map((line, index) => (
+            <span key={index}>
+              {line}
+              <br />
+            </span>
+          ))}
         </label>
   	  </div>
   )