fix: add server components

N0N4T0 · May 7, 2024 · 175f148 · 175f148
1 parent 3d2b8e5
commit 175f148
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 14 deletions.
diff --git a/acesso.txt b/acesso.txt
@@ -0,0 +1 @@
+1715047079952 1715047083047 
diff --git a/src/app/imc/page.tsx b/src/app/imc/page.tsx
@@ -0,0 +1,10 @@
+import IMC from '@/components/imc';
+
+export default function IMCPage() {
+  return (
+    <main>
+      <h1>IMC</h1>
+      <IMC />
+    </main>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,7 +1,10 @@
-export default function Home() {
+import Acesso from '@/components/acesso';
+
+export default function HomePage() {
   return (
     <main>
       <h1>Home</h1>
+      <Acesso />
     </main>
   );
 }
diff --git a/src/app/sobre/page.tsx b/src/app/sobre/page.tsx
@@ -1,10 +1,11 @@
+import dynamic from 'next/dynamic';
+const Width = dynamic(() => import('@/components/width'), { ssr: false });
+
 export default function SobrePage() {
   return (
     <main>
-      <h2>Sobre</h2>
-      <h2 style={{ margin: '1600px 0' }} id="empresa">
-        A Empresa
-      </h2>
+      <h1>Sobre</h1>
+      <Width />
     </main>
   );
 }
diff --git a/src/components/acesso.tsx b/src/components/acesso.tsx
@@ -0,0 +1,7 @@
+import fs from 'fs/promises';
+
+export default async function Acesso() {
+  await fs.appendFile('acesso.txt', `${Date.now()} `, 'utf8');
+  const data = await fs.readFile('acesso.txt', 'utf8');
+  return <div>{data}</div>;
+}
diff --git a/src/components/imc.tsx b/src/components/imc.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import React from 'react';
+
+export default function IMC() {
+  const [peso, setPeso] = React.useState('');
+  const [altura, setAltura] = React.useState('');
+  const [imc, setImc] = React.useState('');
+
+  function handleClick() {
+    const alturaMetro = Number(altura) / 100;
+    const total = (Number(peso) / (alturaMetro * alturaMetro)).toFixed(2);
+    setImc(total);
+  }
+
+  return (
+    <div>
+      <label htmlFor="peso">Peso (em kg)</label>
+      <input
+        type="number"
+        id="peso"
+        name="peso"
+        value={peso}
+        onChange={(e) => setPeso(e.target.value)}
+      />
+      <label htmlFor="altura">Altura (em cm)</label>
+      <input
+        type="number"
+        id="altura"
+        name="altura"
+        value={altura}
+        onChange={(e) => setAltura(e.target.value)}
+      />
+      <button onClick={handleClick}>Calcular</button>
+      <p>IMC: {imc}</p>
+    </div>
+  );
+}
diff --git a/src/components/menu.tsx b/src/components/menu.tsx
@@ -4,19 +4,13 @@ export default function Menu() {
   return (
     <ul className="menu">
       <li>
-        <Link href="/" prefetch={true}>
-          Home
-        </Link>
+        <Link href="/">Home</Link>
       </li>
       <li>
-        <Link href="/sobre#empresa" scroll={false} prefetch={true}>
-          Sobre
-        </Link>
+        <Link href="/sobre">Sobre</Link>
       </li>
       <li>
-        <Link href="/contato" prefetch={true}>
-          Contato
-        </Link>
+        <Link href="/imc">IMC</Link>
       </li>
     </ul>
   );

diff --git a/src/components/width.tsx b/src/components/width.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+
+export default function Width() {
+  const [width, setWidth] = React.useState(
+    document.documentElement.clientWidth,
+  );
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      setWidth(document.documentElement.clientWidth);
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  const [ativo, setAtivo] = React.useState(false);
+
+  return (
+    <div>
+      <h2 style={{ color: ativo ? '#680' : '#b00' }}>
+        Largura da tela: {width}
+      </h2>
+      <button onClick={() => setAtivo((b) => !b)}>Ativar</button>
+    </div>
+  );
+}