From d10262dc8e34ad7f6de7ab4dcb07792fec0fd6a8 Mon Sep 17 00:00:00 2001
From: Andressa Cruz <andressacruzn@gmail.com>
Date: Mon, 4 Dec 2023 23:20:10 -0300
Subject: [PATCH] Added language component

---
 app/components/Lang/Lang.stories.jsx | 31 ++++++++++++++++++++++++++++
 app/components/Lang/page.module.css  |  6 ++++++
 app/page.js                          | 26 +++++++++++++++++++++--
 3 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 app/components/Lang/Lang.stories.jsx
 create mode 100644 app/components/Lang/page.module.css

diff --git a/app/components/Lang/Lang.stories.jsx b/app/components/Lang/Lang.stories.jsx
new file mode 100644
index 0000000..314e47e
--- /dev/null
+++ b/app/components/Lang/Lang.stories.jsx
@@ -0,0 +1,31 @@
+import styles from './page.module.css';
+
+function Lang(props) {
+  return (
+    <div className={styles.language}>
+      <label>
+        <select name="selectedLang" onChange={e => props.onSelectLanguage(e.target.value)}>
+          <option value="pt-br">Portuguese</option>
+          <option value="en">English</option>
+        </select>
+      </label>
+    </div>
+  );
+}
+
+export default {
+  component: Lang
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Desktop = {
+  render: () => <Lang onSelectLanguage={(value)=>{console.log(value);}}/>
+};
+
+export const Mobile = {
+  render: () => <Lang onSelectLanguage={(value)=>{console.log(value);}}/>
+};
\ No newline at end of file
diff --git a/app/components/Lang/page.module.css b/app/components/Lang/page.module.css
new file mode 100644
index 0000000..f144873
--- /dev/null
+++ b/app/components/Lang/page.module.css
@@ -0,0 +1,6 @@
+.language {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  color: red;
+}
diff --git a/app/page.js b/app/page.js
index 78778e5..125d3f3 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,11 +1,33 @@
-import Presentation from './components/Presentation/Presentation.stories'
+'use client'
+
 import Page from './components/Page/Page.stories'
+import Lang from './components/Lang/Lang.stories'
+import language from './language.json'
+import { useEffect, useState } from "react";
 
 export default function Home() {
+
+  const [language, setLanguage] = useState('pt-br');
+
+  // useEffect(() => {    
+  //   // Atualiza o título do documento usando a API do browser    
+  //   document.title = `Você clicou ${count} vezes`;  
+  // });
+    
+  const handleLanguage = (langValue) => {
+    setLanguage(langValue);
+  }
+
   return (
     <main>
       <Page.component>
-        <Presentation.component primary />
+        AQUI: {language}
+        <Lang.component onSelectLanguage={handleLanguage} />
+        {/* <Menu /> */}
+        {/* <Content> */}
+          {/* <Post></Post> */}
+          {/* <Post></Post> */}
+        {/* </Content> */}
       </Page.component>
     </main>
   )