add clock page

KobayashiRui · Nov 20, 2024 · 0ddd4da · 0ddd4da
1 parent 2404c36
commit 0ddd4da
Show file tree

Hide file tree

Showing 5 changed files with 272 additions and 0 deletions.
diff --git a/app/clock/page.tsx b/app/clock/page.tsx
@@ -0,0 +1,28 @@
+import Link from 'next/link'
+import LoadCapacitanceCalc from '@/components/clock/LoadCapacitanceCalc'
+
+export default function Pcb(){
+
+  return (
+    <main className="">
+      <div className="grid grid-cols-3 w-full py-12">
+        <div>
+          <Link href="/" className="text-green-500 hover:text-green-700 flex pl-10">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+          </svg>
+          Go Home
+          </Link>
+        </div>
+        <div>
+          <h1 className="text-3xl font-bold text-center">Clock Calculator</h1>
+        </div>
+        <div></div>
+      </div>
+
+      <div className="flex flex-col justify-center">
+        <LoadCapacitanceCalc></LoadCapacitanceCalc>
+      </div>
+    </main>
+  )
+}
diff --git a/app/mosfet/page.tsx b/app/mosfet/page.tsx
@@ -0,0 +1,28 @@
+import Link from 'next/link'
+import NchMosfetGateResistorCalc from '@/components/mosfet/NchMosfetGateResistorCalc'
+
+export default function Pcb(){
+
+  return (
+    <main className="">
+      <div className="grid grid-cols-3 w-full py-12">
+        <div>
+          <Link href="/" className="text-green-500 hover:text-green-700 flex pl-10">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+          </svg>
+          Go Home
+          </Link>
+        </div>
+        <div>
+          <h1 className="text-3xl font-bold text-center">MOSFET Calculator</h1>
+        </div>
+        <div></div>
+      </div>
+
+      <div className="flex flex-col justify-center">
+        <NchMosfetGateResistorCalc></NchMosfetGateResistorCalc>
+      </div>
+    </main>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -9,9 +9,15 @@ export default function Home() {
       <div className="flex justify-center">
         <div>
           <ul className="list-disc">
+            <li>
+              <Link href="/mosfet" className="text-green-500 hover:text-green-700">MOSFET関連</Link>
+            </li>
             <li>
               <Link href="/pcb" className="text-green-500 hover:text-green-700">PCB関連</Link>
             </li>
+            <li>
+              <Link href="/clock" className="text-green-500 hover:text-green-700">クロック関連</Link>
+            </li>
           </ul>
         </div>
       </div>

diff --git a/components/clock/LoadCapacitanceCalc.tsx b/components/clock/LoadCapacitanceCalc.tsx
@@ -0,0 +1,88 @@
+"use client"
+import React, { useState, useEffect } from "react"
+
+export default function NchMosfetGateResistorCalc(){
+  const [cl, set_cl] = useState("0") //CL
+  const [cz, set_cz] = useState("5") //Cz
+
+  //result
+  const [c1_c2, set_c1_c2] = useState("0")
+
+  const handleCalc = ()=>{
+    const _cl = Number(cl)
+    const _cz = Number(cz)
+    const c = 2*(_cl - _cz)
+    set_c1_c2(String(c))
+  }
+
+
+
+
+  return (
+    <div className="flex flex-col justify-center px-60">
+      <div className="text-center text-base font-normal pb-10">
+        <h2 className="text-xl font-semibold">水晶振動子の負荷容量コンデンサの計算</h2>
+        <p className="text-sm font-medium pb-5">-  -</p>
+      </div>
+      <div className="flex flex-col pb-10">
+        <h3 className="text-lg font-semibold pb-4">パラメータ設定</h3>
+        <div className="">
+          <table className="table-auto">
+            <tbody>
+              <tr>
+                <td className="text-right pr-5">負荷容量CL: </td>
+                <td className="text-left">
+                  <input 
+                    className="bg-gray-600 mr-2 rounded px-2"
+                    type="number" 
+                    value={cl}
+                    onChange={(e)=>set_cl(e.target.value)}
+                  ></input>
+                  pF
+                </td>
+              </tr>
+              <tr>
+                <td className="text-right pr-5">浮遊容量Cz(目安は3～10pF): </td>
+                <td className="text-left">
+                  <input 
+                    className="bg-gray-600 mr-2 rounded px-2"
+                    type="number" 
+                    value={cz}
+                    onChange={(e)=>set_cz(e.target.value)}
+                  ></input>
+                  pF
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <button 
+        className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 border border-green-700 rounded w-60 my-4" 
+        onClick={handleCalc}
+      >
+        Calcurate
+      </button>
+      <div className="flex flex-col pb-10">
+        <h3 className="text-lg font-semibold pb-4">計算結果</h3>
+        <div className="border p-2 mb-4">
+          <table className="table-auto">
+            <tbody>
+              <tr>
+                <td className="text-right pr-5">負荷容量CL: </td>
+                <td className="text-left">{cl} pF</td>
+              </tr>
+              <tr>
+                <td className="text-right pr-5">浮遊容量Cz: </td>
+                <td className="text-left">{cz} pF</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <h4 className="text-base font-semibold pb-4">C1=C2={c1_c2}pF</h4>
+      </div>
+
+
+    </div>
+  )
+}
diff --git a/components/mosfet/NchMosfetGateResistorCalc.tsx b/components/mosfet/NchMosfetGateResistorCalc.tsx
@@ -0,0 +1,122 @@
+"use client"
+import React, { useState, useEffect } from "react"
+
+export default function NchMosfetGateResistorCalc(){
+  const [total_gate_charge, set_total_gate_charge] = useState("0") //nC
+  const [input_voltage, set_input_voltage] = useState("0") //V
+  const [rise_time, set_rise_time] = useState("0") //ns
+
+  //result
+  const [res_tgc, set_res_tgc] = useState(0)
+  const [res_iv, set_res_iv] = useState(0)
+  const [res_rt, set_res_rt] = useState(0)
+  const [res_gc, set_res_gc] = useState(0)
+  const [res_resistor, set_res_resistor] = useState(0)
+
+  const handleCalc = ()=>{
+
+    const tgc = Number(total_gate_charge)
+    const iv = Number(input_voltage)
+    const rt = Number(rise_time)
+
+    const gc = tgc / rt
+    const rg = iv /gc
+
+    set_res_tgc(tgc)
+    set_res_iv(iv)
+    set_res_rt(rt)
+    set_res_gc(gc*1000.0)
+    set_res_resistor(rg)
+
+  }
+
+
+
+
+  return (
+    <div className="flex flex-col justify-center px-60">
+      <div className="text-center text-base font-normal pb-10">
+        <h2 className="text-xl font-semibold">Nch MOSFET ゲート抵抗計算</h2>
+        <p className="text-sm font-medium pb-5">- Nch MOSFET Gate Resistor Calculator -</p>
+        <p>Nch MOSFETに接続するゲート抵抗の値を計算します</p>
+      </div>
+      <div className="flex flex-col pb-10">
+        <h3 className="text-lg font-semibold pb-4">パラメータ設定</h3>
+        <div className="">
+          <table className="table-auto">
+            <tbody>
+              <tr>
+                <td className="text-right pr-5">ゲート入力電荷量Qg: </td>
+                <td className="text-left">
+                  <input 
+                    className="bg-gray-600 mr-2 rounded px-2"
+                    type="number" 
+                    value={total_gate_charge}
+                    onChange={(e)=>set_total_gate_charge(e.target.value)}
+                  ></input>
+                  nC
+                </td>
+              </tr>
+              <tr>
+                <td className="text-right pr-5">入力電圧: </td>
+                <td className="text-left">
+                  <input 
+                    className="bg-gray-600 mr-2 rounded px-2"
+                    type="number" 
+                    value={input_voltage}
+                    onChange={(e)=>set_input_voltage(e.target.value)}
+                  ></input>
+                  V
+                </td>
+              </tr>
+              <tr>
+                <td className="text-right pr-5">ゲート電圧の立ち上がり時間: </td>
+                <td className="text-left">
+                  <input 
+                    className="bg-gray-600 mr-2 rounded px-2"
+                    type="number" 
+                    value={rise_time}
+                    onChange={(e)=>set_rise_time(e.target.value)}
+                  ></input>
+                  ns
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <button 
+        className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 border border-green-700 rounded w-60 my-4" 
+        onClick={handleCalc}
+      >
+        Calcurate
+      </button>
+      <div className="flex flex-col pb-10">
+        <h3 className="text-lg font-semibold pb-4">計算結果</h3>
+        <div className="border p-2 mb-4">
+          <table className="table-auto">
+            <tbody>
+              <tr>
+                <td className="text-right pr-5">ゲート入力電荷量Qg: </td>
+                <td className="text-left">{res_tgc} nC</td>
+              </tr>
+              <tr>
+                <td className="text-right pr-5">入力電圧: </td>
+                <td className="text-left">{res_iv} V</td>
+              </tr>
+              <tr>
+                <td className="text-right pr-5">ゲート電圧の立ち上がり時間: </td>
+                <td className="text-left">{res_rt} ns</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <h4 className="text-base font-semibold pb-4">ゲート電流={res_gc}mA</h4>
+        <h4 className="text-base font-semibold pb-4">ゲート抵抗={res_resistor}Ω</h4>
+
+      </div>
+
+
+    </div>
+  )
+}