diff options
| author | Yuval Adam <_@yuv.al> | 2025-05-22 13:13:14 +0200 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-05-22 13:13:14 +0200 |
| commit | d47b3ccf615639ee7c83a7be10aaa581e5a934e1 (patch) | |
| tree | ea465f20831984e237b4ff0a69108dd59a6991fc /src/components | |
| parent | 69cc1db574e319c77d5ae049979a6b35518b26fe (diff) | |
Add embed page and more cleanup
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Cidr.tsx | 16 | ||||
| -rw-r--r-- | src/components/Navigation.tsx | 2 |
2 files changed, 15 insertions, 3 deletions
diff --git a/src/components/Cidr.tsx b/src/components/Cidr.tsx index e1b1feb..ac22ea6 100644 --- a/src/components/Cidr.tsx +++ b/src/components/Cidr.tsx @@ -1,7 +1,11 @@ import React, { useEffect, useState, useRef } from 'react'; import { Netmask } from 'netmask'; -export default function Cidr() { +interface CidrProps { + embed?: boolean; +} + +export default function Cidr({ embed = false }: CidrProps) { const [ip, setIp] = useState([10, 88, 135, 144]); const [cidr, setCidr] = useState(28); const [cols] = useState(["bg-purple-400", "bg-red-400", "bg-green-400", "bg-yellow-400", "bg-slate-300"]); @@ -221,7 +225,7 @@ export default function Cidr() { return ( - <div className="pt-1 my-6 border-0 sm:border border-gray-300 rounded-lg bg-white/70 shadow-md"> + <div className={`pt-1 ${embed ? 'my-2' : 'my-6'} border-0 sm:border border-gray-300 rounded-lg bg-white/70 shadow-md`}> <div className="flex flex-wrap justify-center gap-4 my-10"> {ip.map((octet, i) => ( <div key={`octet-${i}`}> @@ -273,6 +277,14 @@ export default function Cidr() { } </div> + {embed && (<h2 className="text-lg text-gray-700 text-center mt-4 font-bold"> + CIDR Calculator by <a + href="https://cidr.xyz" + target="_blank" + className="text-blue-600 hover:underline">cidr.xyz</a + > + </h2>)} + <div className="flex justify-center lg:justify-end p-5"> <div className="mx-2"> <button diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index b5ef2a7..1aeca32 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -73,7 +73,7 @@ function NavLinks({ mobile = false }: { mobile?: boolean }) { <a href="/subnet-guide" className={linkClass}> Subnet Guide </a> - <a href="/embed-example" className={linkClass}> + <a href="/embed-widget" className={linkClass}> Embed </a> <a |