[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#1e88e5", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import "@/styles/globals.css" import { SiteHeader } from "@/components/site-header" import { SiteFooter } from "@/components/site-footer" import type React from "react" export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { toast } from "sonner" export default function AdminPage() { const [products, setProducts] = useState([]) const [selectedProduct, setSelectedProduct] = useState(null) const [description, setDescription] = useState("") useEffect(() => { fetchProducts() }, []) const fetchProducts = async () => { const res = await fetch("/api/products") const data = await res.json() setProducts(data) } const updateProduct = async (id: string) => { const res = await fetch(`/api/products/${id}`, { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ description }), }) if (res.ok) { toast.success("Product updated successfully") fetchProducts() } else { toast.error("Failed to update product") } } return (

Product Database Management

Products

{products.map((product: any) => ( ))}

{selectedProduct && (

Edit Product

Product Code

Description

setDescription(e.target.value)}
                  className="bg-[#2a3744] border-[#3a4754] text-white min-h-[100px]"
                />
              </div>
              <Button
                onClick={() => updateProduct(selectedProduct.id)}
                className="bg-[#40C4FF] text-white hover:bg-blue-400"
              >
                Update Product
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)}
    {...props}
  />
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName

const NavigationMenuItem = NavigationMenuPrimitive.Item

const navigationMenuTriggerStyle = cva(
  "group inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:text-[#40C4FF] focus:text-[#40C4FF] focus:outline-none disabled:pointer-events-none disabled:opacity-50",
)

const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
    className={cn(navigationMenuTriggerStyle(), "group", className)}
    {...props}
  >
    {children}{" "}
    <ChevronDown
      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName

const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Content
    ref={ref}
    className={cn(
      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
      className,
    )}
    {...props}
  />
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <div className={cn("absolute left-0 top-full flex justify-center")}>
    <NavigationMenuPrimitive.Viewport
      className={cn(
        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-[#2a3744] bg-[#1B2531] text-white shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
        className,
      )}
      ref={ref}
      {...props}
    />
  </div>
))
NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName

export {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
}

[V0_FILE]typescriptreact:file="components/product-generator.tsx" isQuickEdit="true" isMerged="true"
"use client"

export function ProductGenerator() {
  const [sensorType, setSensorType] = useState("")
  const [selectedSpecs, setSelectedSpecs] = useState<Record<string, string>>({})

const handleSpecChange = (specType: string, value: string) => {
    setSelectedSpecs((prev) => ({ ...prev, [specType]: value }))
  }

const selectedSensorType = sensorTypes.find((type) => type.id === sensorType)

const generateProductCode = () => {
    if (!selectedSensorType) return ""

const specValues = Object.values(selectedSpecs)
    if (specValues.length !== Object.keys(selectedSensorType.specifications).length) return ""

return `${sensorType.toUpperCase()}-${specValues.join("-")}`
  }

return (
    <Card className="bg-[#1B2531] border-[#2a3744]">
      <CardHeader>
        <CardTitle className="text-[#40C4FF] text-xl font-normal">Select Sensor Type and Specifications</CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="space-y-2">
          <label className="text-sm font-medium text-white">Sensor Type:</label>
          <Select
            value={sensorType}
            onValueChange={(value) => {
              setSensorType(value)
              setSelectedSpecs({})
            }}
          >
            <SelectTrigger className="bg-[#2a3744] border-[#3a4754] text-white">
              <SelectValue placeholder="Select sensor type" />
            </SelectTrigger>
            <SelectContent className="bg-[#1B2531] border-[#3a4754]">
              {sensorTypes.map((type) => (
                <SelectItem
                  key={type.id}
                  value={type.id}
                  className="text-white hover:bg-[#2a3744] focus:bg-[#2a3744] focus:text-white"
                >
                  {type.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {selectedSensorType && <p className="text-sm text-gray-400 mt-1">{selectedSensorType.description}</p>}
        </div>

{selectedSensorType && (
          <div className="space-y-4">
            {Object.entries(selectedSensorType.specifications).map(([specType, options]) => (
              <div key={specType} className="space-y-2">
                <label className="text-sm font-medium text-white capitalize">{specType}:</label>
                <Select
                  value={selectedSpecs[specType] || ""}
                  onValueChange={(value) => handleSpecChange(specType, value)}
                >
                  <SelectTrigger className="bg-[#2a3744] border-[#3a4754] text-white">
                    <SelectValue placeholder={`Select ${specType}`} />
                  </SelectTrigger>
                  <SelectContent className="bg-[#1B2531] border-[#3a4754]">
                    {options.map((option: any) => (
                      <SelectItem
                        key={option.value}
                        value={option.value}
                        className="text-white hover:bg-[#2a3744] focus:bg-[#2a3744] focus:text-white"
                      >
                        {option.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            ))}
          </div>
        )}

{generateProductCode() && (
          <div className="pt-4 border-t border-[#2a3744]">
            <p className="text-sm font-medium text-white">Generated Product Code:</p>
            <p className="text-lg font-bold text-[#40C4FF] mt-1">{generateProductCode()}</p>
          </div>
        )}

{sensorType && (
          <div className="pt-4 border-t border-[#2a3744]">
            <h3 className="text-lg font-medium text-[#40C4FF] mb-2">Available Models:</h3>
            <ul className="space-y-2">
              {sensorModels[sensorType].map((model) => (
                <li key={model.id} className="bg-[#2a3744] p-3 rounded-md">
                  <span className="text-white font-medium">{model.name}</span>
                  <span className="text-gray-400 ml-2">Code: {model.code}</span>
                </li>
              ))}
            </ul>
          </div>
        )}
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import { ProductSelector } from "@/components/product-selector"

export default function Home() {
  return (
    <main className="min-h-screen bg-[#1B2531]">
      <div className="container mx-auto p-8">
        <h1 className="text-3xl font-light text-[#40C4FF] mb-8">Product Code Generator</h1>
        <ProductSelector />
      </div>
    </main>
  )
}

[V0_FILE]typescriptreact:file="components/header-search.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Search } from "lucide-react"

export function HeaderSearch() {
  const [isOpen, setIsOpen] = useState(false)

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    const searchQuery = formData.get("s")
    window.location.href = `https://neowave.tech/?s=${encodeURIComponent(searchQuery as string)}`
  }

return (
    <>
      <button
        onClick={() => setIsOpen(true)}
        className="ekit_navsearch-button ekit-modal-popup text-[#40C4FF]"
        aria-label="navsearch-button"
      >
        <i className="icon icon-search">
          <Search className="h-5 w-5" />
        </i>
      </button>

{isOpen && (
        <div className="fixed inset-0 z-[9999]">
          <div className="mfp-bg my-mfp-slide-bottom ekit-promo-popup" onClick={() => setIsOpen(false)} />
          <div className="mfp-wrap mfp-auto-cursor my-mfp-slide-bottom ekit-promo-popup">
            <div className="mfp-container">
              <div className="mfp-content">
                <div className="zoom-anim-dialog ekit_modal-searchPanel">
                  <div className="ekit-search-panel">
                    <form
                      role="search"
                      method="get"
                      className="ekit-search-group"
                      action="https://neowave.tech/"
                      onSubmit={handleSubmit}
                    >
                      <input
                        type="search"
                        className="ekit_search-field"
                        placeholder="Search For Neo Wave Product"
                        name="s"
                        aria-label="search-form"
                      />
                      <button type="submit" className="ekit_search-button" aria-label="search-button">
                        <Search className="h-5 w-5" />
                      </button>
                    </form>
                  </div>
                </div>
              </div>
              <button type="button" className="mfp-close ekit-popup-close" onClick={() => setIsOpen(false)}>
                ×
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  )
}

[V0_FILE]typescriptreact:file="styles/globals.css" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  background-color: #1b2531;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}

.site-header .header-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.site-header .site-branding {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.site-navigation ul.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.site-navigation ul.menu li {
  position: relative;
}

.site-navigation ul.menu li a {
  display: block;
  padding: 8px 0;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.menu-item-has-children > ul {
  z-index: 100;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Mega Menu Styles */
.menu-item-has-children > div {
  transform: translateY(8px) translateX(-50%);
  transition: all 0.2s;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
}

.menu-item-has-children:hover > div {
  opacity: 1;
  transform: translateY(0) translateX(-50%);
  pointer-events: auto;
}

.menu-item-has-children > div::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -6px;
  width: 12px;
  height: 12px;
  background: #1b2531;
  border-left: 1px solid #2a3744;
  border-top: 1px solid #2a3744;
  transform: rotate(45deg);
}

@media (max-width: 1024px) {
  .menu-item-has-children > div {
    width: 90vw !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .menu-item-has-children > div {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .menu-item-has-children > div {
    grid-template-columns: 1fr !important;
  }
}

/* Search styles */
.ekit_navsearch-button {
  color: white;
  transition: color 0.2s;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ekit_navsearch-button:hover {
  color: #40c4ff;
}

.ekit_modal-searchPanel {
  animation: fadeIn 0.2s ease-out;
  position: relative;
  background: transparent;
  padding: 20px;
  width: 100%;
  margin: 20px auto;
  animation: slideInBottom 0.3s ease-out forwards;
}

.ekit-search-panel {
  animation: zoomIn 0.2s ease-out;
  width: 100%;
}

.ekit-search-group {
  position: relative;
  display: flex;
  align-items: center;
}

.ekit_search-field {
  width: 100%;
  height: 70px;
  background: transparent;
  border: 2px solid #40c4ff;
  border-radius: 5px;
  padding: 0 70px 0 20px;
  color: white;
  font-size: 16px;
  outline: none;
}

.ekit_search-field::placeholder {
  color: #ffffff80;
}

.ekit_search-button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #40c4ff;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mfp-bg.my-mfp-slide-bottom {
  background: rgba(0, 0, 0, 0.9);
  position: fixed;
  inset: 0;
}

.mfp-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mfp-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mfp-content {
  position: relative;
  width: 90%;
  max-width: 800px;
}

.mfp-close.ekit-popup-close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: white;
  font-size: 40px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.mfp-close.ekit-popup-close:hover {
  opacity: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideInBottom {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .site-navigation {
    display: none;
  }
}

[V0_FILE]typescriptreact:file="components/site-header.tsx" isQuickEdit="true" isMerged="true"
"use client"
import Image from "next/image"
import { HeaderSearch } from "./header-search"

export function SiteHeader() {
  return (
    <header className="site-header w-full bg-[#1B2531] border-b border-[#2a3744]">
      <div className="header-inner container mx-auto px-4 py-2 flex items-center justify-between">
        <div className="site-branding">
          <a href="https://neowave.tech/" className="custom-logo-link">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo-for-header-2-300x75-new-April-2024-sbw0Apd0FWeuoojavqgVb5z3mA1XnP.png"
              alt="Neo Wave"
              width={180}
              height={45}
              className="h-auto w-auto"
            />
          </a>
        </div>

<nav className="site-navigation flex items-center">
          <ul className="menu flex items-center gap-8 text-sm">
            <li>
              <a
                href="https://neowave.tech/"
                className="text-[#40C4FF] hover:text-white transition-colors premium-menu-link premium-menu-link-parent inline-flex items-center gap-2"
                aria-current="page"
              >
                HOME
              </a>
            </li>
            <li className="menu-item-has-children relative group">
              <a
                href="https://neowave.tech/products/"
                className="text-white hover:text-[#40C4FF] transition-colors flex flex-row items-center gap-1"
              >
                PRODUCTS
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="transition-transform group-hover:rotate-180"
                >
                  <path d="m6 9 6 6 6-6" />
                </svg>
              </a>
              <div className="absolute left-1/2 -translate-x-1/2 top-full hidden group-hover:grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 w-[calc(100vw-2rem)] max-w-[1200px] p-6 bg-[#1B2531] border border-[#2a3744] rounded-lg shadow-xl">
                <div>
                  <h3 className="text-[#40C4FF] font-medium mb-4">I/O modules and data transmission</h3>
                  <ul className="space-y-2">
                    <li>
                      <a
                        href="https://neowave.tech/p-catigory/industrial-switches"
                        className="text-white hover:text-[#40C4FF] transition-colors block"
                      >
                        Industrial switches
                      </a>
                    </li>
                    <li>
                      <a
                        href="https://neowave.tech/p-catigory/i-o-modules"
                        className="text-white hover:text-[#40C4FF] transition-colors block"
                      >
                        I/O modules
                      </a>
                    </li>
                  </ul>
                </div>
                <div>
                  <h3 className="text-[#40C4FF] font-medium mb-4">Sensors and Switches</h3>
                  <ul className="space-y-2">
                    <li>
                      <a
                        href="https://neowave.tech/p-catigory/temperature-and-humidity"
                        className="text-white hover:text-[#40C4FF] transition-colors block"
                      >
                        Temperature and humidity
                      </a>
                    </li>
                    <li>
                      <a
                        href="https://neowave.tech/p-catigory/air-quality"
                        className="text-white hover:text-[#40C4FF] transition-colors block"
                      >
                        Air Quality
                      </a>
                    </li>
                    <li>
                      <a
                        href="https://neowave.tech/p-catigory/pressure-air-liquid"
                        className="text-white hover:text-[#40C4FF] transition-colors block"
                      >
                        Pressure (Air & liquid)
                      </a>
                    </li>
                    <li>
                      <a
                        href="https://neowave.tech/p-catigory/level-measuring"
                        className="text-white hover:text-[#40C4FF] transition-colors block"
                      >
                        Level Measuring
                      </a>
                    </li>
                  </ul>
                </div>
                <div>
                  <h3 className="text-[#40C4FF] font-medium mb-4">HVAC control</h3>
                  <ul className="space-y-2">
                    <li>
                      <a
                        href="https://neowave.tech/p-catigory/smart-thermostat"
                        className="text-white hover:text-[#40C4FF] transition-colors block"
                      >
                        Smart Thermostat
                      </a>
                    </li>
                    <li>
                      <a
                        href="https://neowave.tech/p-catigory/damper-actuators"
                        className="text-white hover:text-[#40C4FF] transition-colors block"
                      >
                        Damper Actuators
                      </a>
                    </li>
                  </ul>
                </div>
                <div>
                  <h3 className="text-[#40C4FF] font-medium mb-4">Power & Energy</h3>
                  <ul className="space-y-2">
                    <li>
                      <a
                        href="https://neowave.tech/p-catigory/btu-meters"
                        className="text-white hover:text-[#40C4FF] transition-colors block"
                      >
                        BTU Meters
                      </a>
                    </li>
                    <li>
                      <a
                        href="https://neowave.tech/p-catigory/water-meters"
                        className="text-white hover:text-[#40C4FF] transition-colors block"
                      >
                        Water Meters
                      </a>
                    </li>
                  </ul>
                </div>
                <div>
                  <h3 className="text-[#40C4FF] font-medium mb-4">Life Safety Systems</h3>
                  <ul className="space-y-2">
                    <li>
                      <a
                        href="https://neowave.tech/p-catigory/fire-alarm-systems"
                        className="text-white hover:text-[#40C4FF] transition-colors block"
                      >
                        Fire Alarm Systems
                      </a>
                    </li>
                    <li>
                      <a
                        href="https://neowave.tech/p-catigory/lpg-natural-gas-detectors"
                        className="text-white hover:text-[#40C4FF] transition-colors block"
                      >
                        LPG & Natural Gas Detectors
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li>
              <a
                href="https://neowave.tech/career/"
                className="text-white hover:text-[#40C4FF] transition-colors premium-menu-link premium-menu-link-parent inline-flex items-center gap-2"
              >
                CAREER
              </a>
            </li>
            <li>
              <a
                href="https://neowave.tech/news-and-event/"
                className="text-white hover:text-[#40C4FF] transition-colors premium-menu-link premium-menu-link-parent inline-flex items-center gap-2"
              >
                NEWS AND EVENT
              </a>
            </li>
            <li>
              <a
                href="https://neowave.tech/contact-us/"
                className="text-white hover:text-[#40C4FF] transition-colors premium-menu-link premium-menu-link-parent inline-flex items-center gap-2"
              >
                CONTACT US
              </a>
            </li>
          </ul>
          <div className="ml-8">
            <HeaderSearch />
          </div>
        </nav>
      </div>
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/site-footer.tsx" isMerged="true"
import { MapPin, Phone, Mail } from "lucide-react"
import Image from "next/image"

export function SiteFooter() {
  return (
    <footer className="bg-[#1B2531] border-t border-[#2a3744] py-12">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
          <div>
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/m-e1711971991323-2mknykSFdtXqO6wehmSaNc7AzcqsYO.png"
              alt="Neo Wave"
              width={200}
              height={80}
              className="mb-4"
            />
          </div>
          <div>
            <h3 className="text-xl text-white font-medium mb-6">Useful Links</h3>
            <ul className="space-y-3">
              <li>
                <a href="https://neowave.tech/" className="text-gray-300 hover:text-[#40C4FF] transition-colors">
                  Home
                </a>
              </li>
              <li>
                <a
                  href="https://neowave.tech/products/"
                  className="text-gray-300 hover:text-[#40C4FF] transition-colors"
                >
                  Products
                </a>
              </li>
              <li>
                <a
                  href="https://neowave.tech/news-and-event/"
                  className="text-gray-300 hover:text-[#40C4FF] transition-colors"
                >
                  News & events
                </a>
              </li>
              <li>
                <a
                  href="https://neowave.tech/contact-us/"
                  className="text-gray-300 hover:text-[#40C4FF] transition-colors"
                >
                  Contact us
                </a>
              </li>
            </ul>
          </div>
          <div>
            <h3 className="text-xl text-white font-medium mb-6">Contact us</h3>
            <ul className="space-y-4">
              <li className="flex items-start gap-3 text-gray-300">
                <MapPin className="w-5 h-5 text-[#40C4FF] flex-shrink-0 mt-1" />
                <span>8 The Green A, Dover, DE 19901, United States</span>
              </li>
              <li className="flex items-center gap-3 text-gray-300">
                <Phone className="w-5 h-5 text-[#40C4FF]" />
                <a href="tel:+13025251275" className="hover:text-[#40C4FF] transition-colors">
                  +1 (302) 525-1275
                </a>
              </li>
              <li className="flex items-center gap-3 text-gray-300">
                <Mail className="w-5 h-5 text-[#40C4FF]" />
                <a href="mailto:info@neowave.tech" className="hover:text-[#40C4FF] transition-colors">
                  info@neowave.tech
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div className="mt-12 pt-6 border-t border-[#2a3744] text-center">
          <p className="text-gray-400">Copyright © 2024 Neo Wave. All rights reserved.</p>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescript:file="lib/data.ts" isFixed="true" isQuickEdit="true" isMerged="true"
export const sensorTypes = [
  {
    id: "temp-humid",
    name: "Temperature and Humidity",
    icon: "Thermometer",
    description: "Temperature and humidity sensors for various applications",
    specifications: {
      model: [
        { value: "TxTH52", label: "TxTH52 - Outdoor Temperature and Humidity Transmitter" },
        { value: "TxTH28NW", label: "TxTH28NW - Wall-mounted temperature and humidity transmitter" },
        { value: "TxTH28ND", label: "TxTH28ND - Duct type temperature and humidity transmitter" },
        { value: "TxTH28NS", label: "TxTH28NS - Split type temperature and humidity transmitter" },
        { value: "TxTH91-XP", label: "TxTH91-XP - Room Humidity and Temperature Sensor" },
        { value: "TxTHP", label: "TxTHP - Temperature and Humidity Sensor Probe" },
        { value: "TxTH28", label: "TxTH28 - Indoor Temperature Humidity Sensor" },
        { value: "TxT02", label: "TxT02 - Temperature Sensor Series" },
      ],
      accuracy: [
        { value: "3", label: "±3%RH(±0.5℃)" },
        { value: "2", label: "±2%RH(±0.3℃)" },
      ],
      humidityOutput: [
        { value: "V10", label: "0-10VDC(Three-wired)" },
        { value: "A", label: "4-20mA(Two-wired)" },
        { value: "RS", label: "RS485/Modbus" },
        { value: "N", label: "No output" },
      ],
      temperatureOutput: [
        { value: "V10", label: "0-10VDC(Three-wired)" },
        { value: "A", label: "4-20mA(Two-wired)" },
        { value: "RS", label: "RS485/Modbus" },
        { value: "1", label: "PT100, ±0.2℃@0℃" },
        { value: "2", label: "PT1000, ±0.2℃@0℃" },
        { value: "3", label: "NTC10K, ±0.4℃@25℃" },
        { value: "4", label: "NTC20K, ±0.4℃@25℃" },
        { value: "5", label: "NTC10K, ±0.4℃@25℃" },
        { value: "N", label: "No output" },
      ],
      temperatureRange: [
        { value: "0", label: "None" },
        { value: "1", label: "0-50℃" },
        { value: "2", label: "-20-60℃" },
        { value: "9", label: "Others (customized)" },
      ],
      display: [
        { value: "1", label: "Without display" },
        { value: "2", label: "With display" },
      ],
      communication: [
        { value: "1", label: "MOD Modbus RS485" },
        { value: "2", label: "BAC BACnet MS/TP" },
      ],
      interface: [
        { value: "1", label: "No Interface" },
        { value: "2", label: "Colour Display" },
      ],
      color: [
        { value: "B", label: "Black" },
        { value: "W", label: "White" },
      ],
      probeLength: [
        { value: "0", label: "65MM" },
        { value: "1", label: "100MM" },
        { value: "2", label: "200MM" },
        { value: "3", label: "150MM" },
        { value: "9", label: "Customized" },
      ],
    },
  },
  {
    id: "air-quality",
    name: "Air Quality",
    icon: "Wind",
    description: "Sensors for monitoring various air quality parameters",
    specifications: {
      model: [
        { value: "TxCOI8", label: "TxCOI8 - Indoor carbon monoxide transducer" },
        { value: "TxAQ84", label: "TxAQ84 - ALL-IN-ONE AIR QUALITY TRANDUCER" },
        { value: "TxCDTW", label: "TxCDTW - Room CO2/Temp. Transducer" },
        { value: "TxCDTD", label: "TxCDTD - Duct mount CO2/Temp. Transducer" },
        { value: "TxCOW", label: "TxCOW - Wall mounted electrochemical CO sensor" },
        { value: "TxCDI", label: "TxCDI - Indoor CO2 monitor" },
        { value: "TxCDD", label: "TxCDD - Ducted CO2 monitor" },
        { value: "TxCDW", label: "TxCDW - Wall Mounted CO2 monitor" },
      ],
      measureRange: {
        CO: [
          { value: "1", label: "100ppm" },
          { value: "2", label: "250ppm" },
          { value: "4", label: "400ppm" },
        ],
        CO2: [
          { value: "2", label: "2000ppm" },
          { value: "5", label: "5000ppm" },
          { value: "10", label: "10000ppm" },
        ],
        COW: [
          { value: "1", label: "500ppm" },
          { value: "2", label: "1000ppm" },
        ],
      },
      output: [
        { value: "AV", label: "4-20mA &0-10V" },
        { value: "RS", label: "RS485/Modbus" },
        { value: "V5", label: "0-5V" },
        { value: "V10", label: "0-10V" },
        { value: "A", label: "4-20mA" },
      ],
      display: [
        { value: "1", label: "Without Display" },
        { value: "2", label: "With Display" },
      ],
      relay: [
        { value: "1", label: "N/A" },
        { value: "2", label: "1xSPDT" },
      ],
      installation: [
        { value: "1", label: "Indoor type" },
        { value: "2", label: "Top suction type" },
      ],
      tempRH: [
        { value: "1", label: "N/A" },
        { value: "2", label: "Temp&RH" },
      ],
      co2: [
        { value: "1", label: "N/A" },
        { value: "2", label: "CO2" },
      ],
      pm: [
        { value: "1", label: "N/A" },
        { value: "2", label: "PM2.5&PM10" },
      ],
      voc: [
        { value: "1", label: "N/A" },
        { value: "2", label: "VOC" },
      ],
      formaldehyde: [
        { value: "1", label: "N/A" },
        { value: "2", label: "HCHO" },
      ],
      outputType: [
        { value: "RSN", label: "Non-isolated RS485" },
        { value: "RS", label: "Isolation type of RS485" },
      ],
      indicationLight: [
        { value: "1", label: "None" },
        { value: "2", label: "With 3-color LED" },
      ],
      tempOutput: [
        { value: "VA", label: "4-20mA/0-10VDC" },
        { value: "1", label: "PT1000, ±0.2°C @25°C" },
        { value: "2", label: "PT100, ±0.2°C @25°C" },
        { value: "3", label: "NTC20K, ±0.2°C @25°C" },
        { value: "4", label: "NI1000, ±0.5°C @25°C" },
        { value: "5", label: "NTC10K-II, ±0.2°C @25°C" },
        { value: "6", label: "NTC10K-III, ±0.3°C @25°C" },
        { value: "7", label: "NTC10K-A, ±0.3°C @25°C" },
        { value: "RS", label: "RS485/Modbus" },
      ],
    },
  },
  {
    id: "pressure",
    name: "Pressure (Air & Liquid)",
    icon: "Gauge",
    description: "Sensors for monitoring pressure in air and liquid systems",
    specifications: {
      model: [
        { value: "TXADP12", label: "TXADP12 - Differential Pressure Sensor" },
        { value: "DPS52", label: "DPS52 - Differential Pressure Switch" },
        { value: "DPS18", label: "DPS18 - Differential Pressure Sensor" },
        { value: "TxDP35", label: "TxDP35 - Differential Pressure Transmitter" },
        { value: "TxLDP16", label: "TxLDP16 - Low Differential Pressure Transducer" },
      ],
      pressureRange: {
        TXADP12: [
          { value: "2", label: "-100~100pa" },
          { value: "4", label: "-1000~1000Pa" },
          { value: "6", label: "-10000~10000Pa" },
        ],
        DPS18: [
          { value: "01", label: "20-200 Pa" },
          { value: "02", label: "30-300 Pa" },
          { value: "03", label: "40-400 Pa" },
          { value: "04", label: "50-500 Pa" },
          { value: "05", label: "200-1000 Pa" },
          { value: "06", label: "100-1000 Pa" },
          { value: "07", label: "500-2500 Pa" },
          { value: "08", label: "1000-5000 Pa" },
        ],
        TxLDP16: [
          { value: "101D", label: "0±100Pa (two-way)" },
          { value: "101G", label: "0-100Pa (one-way)" },
          { value: "102D", label: "0±1000Pa" },
          { value: "102G", label: "0-1000Pa" },
          { value: "251D", label: "0±250Pa" },
          { value: "251G", label: "0-250Pa" },
          { value: "252D", label: "0±2500Pa" },
          { value: "252G", label: "0-2500Pa" },
          { value: "051D", label: "0±50Pa" },
          { value: "051G", label: "0-50Pa" },
          { value: "501D", label: "0±500Pa" },
          { value: "501G", label: "0-500Pa" },
          { value: "502D", label: "0±5000Pa" },
          { value: "502G", label: "0-5000Pa" },
          { value: "103D", label: "0±10000Pa" },
        ],
      },
      display: [
        { value: "1", label: "Without Display" },
        { value: "2", label: "Display" },
      ],
      output: [
        { value: "AV", label: "20-4mA +10-0VDC (Simultaneous output)" },
        { value: "A", label: "20-4mA (Two-wired)" },
        { value: "V10", label: "0-10VDC (Three-wired)" },
        { value: "V5", label: "0-5VDC (Three-wired)" },
        { value: "RS", label: "RS-485 communication" },
        { value: "RSW", label: "RS-485 communication (with isolation)" },
        { value: "RsV10", label: "RS485, 0-10VDC" },
        { value: "RsV5", label: "RS485, 0-5VDC" },
        { value: "RsA", label: "RS485, 4-20mA" },
      ],
      connectorMaterial: [
        { value: "1", label: "Brass" },
        { value: "2", label: "SS 316L" },
      ],
      connectorThread: [
        { value: "1", label: '7/16" UNF FEMALE' },
        { value: "2", label: '7/16" UNF MALE' },
        { value: "3", label: 'R1/4" MALE' },
        { value: "4", label: 'G1/4" MALE' },
        { value: "5", label: '1/4"NPT MALE' },
        { value: "6", label: "connect φ8 soft tube" },
        { value: "7", label: "connect φ6 steel pipe" },
      ],
      wiring: [
        { value: "1", label: "Plastic Gland PG16" },
        { value: "2", label: "Brass Nickel Plated Gland PG16" },
      ],
      unit: [
        { value: "K", label: "kPa" },
        { value: "P", label: "psi" },
        { value: "B", label: "bar" },
        { value: "M", label: "MPa" },
      ],
      accuracy: [
        { value: "0.25", label: "0.25 = 0.25%F.S." },
        { value: "0.5", label: "0.5 = 0.5%F.S." },
      ],
      electricalConnection: [
        { value: "D", label: "D = DIN43650A (Big Hirschmann)" },
        { value: "M", label: "M = M12 Waterproof outlet" },
        { value: "C3", label: "C3=GX12 three cores aviation connector" },
        { value: "C4", label: "C4=GX12 four cores aviation connector" },
        { value: "H", label: "H = M12 four cores aviation connector" },
      ],
      pressureConnection: [
        { value: "G", label: "G = G1/4" },
        { value: "N", label: "N = NPT1/4" },
        { value: "G2", label: "G2 = G1/2" },
        { value: "M20", label: "M20 = M20*1.5" },
        { value: "M14", label: "M14 = M14*1.5" },
        { value: "M10", label: "M10 = M10*1" },
        { value: "U", label: "U = 7/16-20UNF External thread" },
        { value: "R", label: "R = R1/4" },
      ],
      cableLength: [
        { value: "1", label: "1.0 = 1m" },
        { value: "2", label: "2.0 = 2m" },
        { value: "3", label: "3.0 = 3m" },
      ],
    },
  },
  {
    id: "level",
    name: "Level Measuring",
    icon: "Ruler",
    description: "Sensors for measuring fluid levels",
    specifications: {
      model: [
        { value: "TxSL20", label: "TxSL20 - Submersible Liquid Level Tranducer" },
        { value: "TxSL20-2in1", label: "TxSL20 - Liquid Temperature and Level 2 in 1 Tranducer" },
      ],
      range: [{ value: "200", label: "0-0.5...200mH2O" }],
      tempRange: [{ value: "100", label: "-20~100°C" }],
      output: [
        { value: "A", label: "4-20mA (Two-wired)" },
        { value: "V0", label: "0.5-4.5V (Three-wired)" },
        { value: "V5", label: "0-5V (Three-wired)" },
        { value: "V10", label: "V10 = 0-10V (Three-wired)" },
        { value: "RS", label: "RS = RS485" },
      ],
      unit: [
        { value: "M", label: "M=Meter" },
        { value: "CM", label: "CM=Centimeter" },
      ],
      accuracy: [{ value: "0.5", label: "0.5 = 0.5%F.S." }],
      electricalConnection: [
        { value: "M", label: "M=Directly outlet" },
        { value: "M12", label: "M=M12 waterproof outlet" },
      ],
      display: [
        { value: "1", label: "N=Without display" },
        { value: "2", label: "D2=Explosion-proof digital display type" },
      ],
      cableLength: [
        { value: "1", label: "1.0 = 1m" },
        { value: "2", label: "2.0 = 2m" },
        { value: "3", label: "3.0 = 3m" },
      ],
    },
  },
]

export const modelSpecifications = {
  TxTH52: {
    name: "Outdoor Temperature and Humidity Transmitter",
    generateCode: (specs: Record<string, string>) => {
      return `TxTH52-${specs.accuracy}-${specs.humidityOutput}-${specs.temperatureOutput}-${specs.temperatureRange}`
    },
    availableOptions: {
      accuracy: ["3"],
      humidityOutput: ["V10", "A", "RS"],
      temperatureOutput: ["V10", "A", "RS", "1", "2", "3", "4"],
      temperatureRange: ["1", "2", "9"],
    },
  },
  TxTH28NW: {
    name: "Wall-mounted temperature and humidity transmitter",
    generateCode: (specs: Record<string, string>) => {
      return `TxTH28NW-${specs.accuracy}-${specs.humidityOutput}-${specs.temperatureOutput}-${specs.temperatureRange}-${specs.display}`
    },
    availableOptions: {
      accuracy: ["3"],
      humidityOutput: ["V10", "A", "RS"],
      temperatureOutput: ["V10", "A", "RS", "1", "2", "3", "4"],
      temperatureRange: ["0", "1", "2", "9"],
      display: ["1", "2"],
    },
  },
  "TxTH91-XP": {
    name: "Room Humidity and Temperature Sensor",
    generateCode: (specs: Record<string, string>) => {
      return `TxTH91-XP-${specs.communication}-${specs.interface}-${specs.color}`
    },
    availableOptions: {
      communication: ["1", "2"],
      interface: ["1", "2"],
      color: ["B", "W"],
    },
  },
  TxTHP: {
    name: "Temperature and Humidity Sensor Probe",
    generateCode: (specs: Record<string, string>) => {
      return `TxTHP-${specs.accuracy}-${specs.humidityOutput}-${specs.temperatureOutput}-${specs.temperatureRange}`
    },
    availableOptions: {
      accuracy: ["3"],
      humidityOutput: ["V10", "RS"],
      temperatureOutput: ["V10", "RS"],
      temperatureRange: ["0", "1", "2", "9"],
    },
  },
  TxT02: {
    name: "Temperature Sensor Series",
    generateCode: (specs: Record<string, string>) => {
      let baseCode = `TxT02${specs.model}`
      if (specs.temperatureOutput) baseCode += `-${specs.temperatureOutput}`
      if (specs.temperatureRange) baseCode += `-${specs.temperatureRange}`
      if (specs.probeLength) baseCode += `-${specs.probeLength}`
      return baseCode
    },
    availableOptions: {
      model: [
        { value: "S", label: "Separated type" },
        { value: "C", label: "Clamp type" },
        { value: "W", label: "Wall-mounted" },
        { value: "D", label: "Duct type" },
        { value: "P", label: "Tube type/water pipe type" },
      ],
      temperatureOutput: ["V10", "A", "V5", "1", "2", "3", "4", "5", "6", "7"],
      temperatureRange: ["0", "1", "2", "9"],
      probeLength: ["0", "1", "2", "3", "9"],
    },
  },
  TxTH28: {
    name: "Indoor Temperature Humidity Sensor",
    generateCode: (specs: Record<string, string>) => {
      return `TxTH28-${specs.accuracy}-${specs.humidityOutput}-${specs.temperatureOutput}-${specs.temperatureRange}-${specs.display}`
    },
    availableOptions: {
      accuracy: ["3"],
      humidityOutput: ["A", "V10", "RS", "N"],
      temperatureOutput: ["A", "V10", "RS", "1", "2", "3", "5", "N"],
      temperatureRange: ["0", "1", "2", "9"],
      display: ["1", "2"],
    },
  },
  TxCOI8: {
    name: "Indoor carbon monoxide transducer",
    generateCode: (specs: Record<string, string>) => {
      return `TxCOI8-${specs.measureRange}-${specs.output}-${specs.display}-${specs.relay}`
    },
    availableOptions: {
      measureRange: "CO",
      output: ["AV", "RS"],
      display: ["1", "2"],
      relay: ["1", "2"],
    },
  },
  TxAQ84: {
    name: "ALL-IN-ONE AIR QUALITY TRANDUCER",
    generateCode: (specs: Record<string, string>) => {
      return `TxAQ84-${specs.installation}-${specs.tempRH}-${specs.co2}-${specs.pm}-${specs.voc}-${specs.formaldehyde}-${specs.outputType}-${specs.display}-${specs.indicationLight}`
    },
    availableOptions: {
      installation: ["1", "2"],
      tempRH: ["1", "2"],
      co2: ["1", "2"],
      pm: ["1", "2"],
      voc: ["1", "2"],
      formaldehyde: ["1", "2"],
      outputType: ["RSN", "RS"],
      display: ["1", "2"],
      indicationLight: ["1", "2"],
    },
  },
  TxCDTW: {
    name: "Room CO2/Temp. Transducer",
    generateCode: (specs: Record<string, string>) => {
      return `TxCDTW-${specs.co2Output}-${specs.tempOutput}-${specs.display}`
    },
    availableOptions: {
      co2Output: ["VA", "RS"],
      tempOutput: ["VA", "1", "2", "3", "4", "5", "6", "7", "RS"],
      display: ["1", "2"],
    },
  },
  TxCOW: {
    name: "Wall mounted electrochemical CO sensor",
    generateCode: (specs: Record<string, string>) => {
      return `TxCOW-${specs.measureRange}-${specs.output}`
    },
    availableOptions: {
      measureRange: "COW",
      output: ["V5", "V10", "A", "RS"],
    },
  },
  TxCDI: {
    name: "Indoor CO2 monitor",
    generateCode: (specs: Record<string, string>) => {
      return `TxCDI-${specs.measureRange}-${specs.output}-${specs.display}`
    },
    availableOptions: {
      measureRange: ["2", "5"],
      output: ["V5", "V10", "A", "RS"],
      display: ["1", "2"],
    },
  },
  TxCDD: {
    name: "Ducted CO2 monitor",
    generateCode: (specs: Record<string, string>) => {
      return `TxCDD-${specs.measureRange}-${specs.output}`
    },
    availableOptions: {
      measureRange: ["2", "5"],
      output: ["5V", "10V", "A", "RS"],
    },
  },
  TxCDW: {
    name: "Wall Mounted CO2 monitor",
    generateCode: (specs: Record<string, string>) => {
      return `TxCDW-${specs.measureRange}-${specs.output}`
    },
    availableOptions: {
      measureRange: ["2", "5", "10"],
      output: ["V5", "V10", "A", "RS"],
    },
  },
  TXADP12: {
    name: "Differential Pressure Sensor",
    generateCode: (specs: Record<string, string>) => {
      return `TXADP12-${specs.pressureRange}-${specs.display}-${specs.output}`
    },
    availableOptions: {
      pressureRange: "TXADP12",
      display: ["1", "2"],
      output: ["AV", "A", "V10", "V5", "RS", "RSW"],
    },
  },
  DPS52: {
    name: "Differential Pressure Switch",
    generateCode: (specs: Record<string, string>) => {
      return `DPS52-${specs.connectorMaterial}-${specs.connectorThread}-${specs.wiring}`
    },
    availableOptions: {
      connectorMaterial: ["1", "2"],
      connectorThread: ["1", "2", "3", "4", "5", "6", "7"],
      wiring: ["1", "2"],
    },
  },
  DPS18: {
    name: "Differential Pressure Sensor",
    generateCode: (specs: Record<string, string>) => {
      return `DPS18-${specs.pressureRange}`
    },
    availableOptions: {
      pressureRange: "DPS18",
    },
  },
  TxDP35: {
    name: "Differential Pressure Transmitter",
    generateCode: (specs: Record<string, string>) => {
      return `TxDP35-${specs.output}-${specs.unit}-${specs.accuracy}-${specs.electricalConnection}-${specs.pressureConnection}-${specs.cableLength}`
    },
    availableOptions: {
      output: ["A", "V10", "RS"],
      unit: ["K", "P", "B", "M"],
      accuracy: ["0.25", "0.5"],
      electricalConnection: ["D", "M", "C3", "C4", "H"],
      pressureConnection: ["G", "N", "G2", "M20", "M14", "M10", "U", "R"],
      cableLength: ["1", "2", "3"],
    },
  },
  TxLDP16: {
    name: "Low Differential Pressure Transducer",
    generateCode: (specs: Record<string, string>) => {
      return `TxLDP16-${specs.pressureRange}-${specs.output}`
    },
    availableOptions: {
      pressureRange: "TxLDP16",
      output: ["A", "V10", "V5", "RS", "RsV10", "RsV5", "RsA"],
    },
  },
  TxSL20: {
    name: "Submersible Liquid Level Tranducer",
    generateCode: (specs: Record<string, string>) => {
      return `TxSL20-${specs.output}-${specs.unit}-${specs.accuracy}-${specs.electricalConnection}-${specs.display}-${specs.cableLength}`
    },
    availableOptions: {
      output: ["A", "V0", "V5", "V10", "RS"],
      unit: ["M", "CM"],
      accuracy: ["0.5"],
      electricalConnection: ["M"],
      display: ["1", "2"],
      cableLength: ["1", "2"],
    },
  },
  "TxSL20-2in1": {
    name: "Liquid Temperature and Level 2 in 1 Tranducer",
    generateCode: (specs: Record<string, string>) => {
      return `TxSL20-${specs.output}-${specs.unit}-${specs.accuracy}-${specs.electricalConnection}-${specs.cableLength}`
    },
    availableOptions: {
      output: ["A", "V0", "RS"],
      unit: ["M", "CM"],
      accuracy: ["0.5"],
      electricalConnection: ["M12"],
      cableLength: ["1", "2", "3"],
    },
  },
}

export const sensorModels = {
  "temp-humid": [
    { id: "TxTH28N", name: "TxTH28N", code: "TxTH28N" },
    { id: "TxTH52", name: "TxTH52", code: "TxTH52" },
    { id: "TxTH91-XP", name: "TxTH91-XP", code: "TxTH91-XP" },
    { id: "TxT02", name: "TxT02", code: "TxT02" },
    { id: "TxSL20", name: "TxSL20", code: "TxSL20" },
    { id: "TxTL22", name: "TxTL22", code: "TxTL22" },
  ],
  "air-quality": [
    { id: "TxCDW", name: "TxCDW", code: "TxCDW" },
    { id: "TxCDD", name: "TxCDD", code: "TxCDD" },
    { id: "TxCDI", name: "TxCDI", code: "TxCDI" },
    { id: "TxAQ84", name: "TxAQ84", code: "TxAQ84" },
    { id: "TxCOI8", name: "TxCOI8", code: "TxCOI8" },
    { id: "TxCOW", name: "TxCOW", code: "TxCOW" },
    { id: "TxCDTW", name: "TxCDTW", code: "TxCDTW" },
    { id: "TxCDTD", name: "TxCDTD", code: "TxCDTD" },
  ],
  pressure: [
    { id: "TXADP12", name: "TXADP12", code: "TXADP12" },
    { id: "DPS52", name: "DPS52", code: "DPS52" },
    { id: "DPS18", name: "DPS18", code: "DPS18" },
    { id: "TxDP35", name: "TxDP35", code: "TxDP35" },
    { id: "TxLDP16", name: "TxLDP16", code: "TxLDP16" },
  ],
  level: [
    { id: "TxSL20", name: "TxSL20 - Submersible Liquid Level Tranducer", code: "TxSL20" },
    { id: "TxSL20-2in1", name: "TxSL20 - Liquid Temperature and Level 2 in 1 Tranducer", code: "TxSL20-2in1" },
  ],
}

[V0_FILE]typescriptreact:file="components/comparison-view.tsx" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Download, X } from "lucide-react"
import { sensorTypes } from "@/lib/data"
import { generateCSV } from "@/utils/csv-export"

interface ComparisonViewProps {
  selectedProducts: string[]
  onRemove: (productCode: string) => void
}

export function ComparisonView({ selectedProducts, onRemove }: ComparisonViewProps) {
  const getProductDetails = (productCode: string) => {
    const [type, model, ...specs] = productCode.split("-")
    const sensorType = sensorTypes.find((s) => s.id === type)
    if (!sensorType) return null

const details: Record<string, string> = {
      Model: model,
    }

switch (type) {
      case "temp-humid":
        details["Accuracy"] = sensorType.specifications.accuracy?.find((a) => a.value === specs[0])?.label || "N/A"
        details["Humidity Output"] =
          sensorType.specifications.humidityOutput?.find((h) => h.value === specs[1])?.label || "N/A"
        details["Temperature Output"] =
          sensorType.specifications.temperatureOutput?.find((t) => t.value === specs[2])?.label || "N/A"
        details["Temperature Range"] =
          sensorType.specifications.temperatureRange?.find((r) => r.value === specs[3])?.label || "N/A"
        break
      case "air-quality":
        details["Accuracy"] = sensorType.specifications.accuracy?.find((a) => a.value === specs[0])?.label || "N/A"
        details["Measure Range"] =
          sensorType.specifications.measureRange?.find((m) => m.value === specs[1])?.label || "N/A"
        details["Output"] = sensorType.specifications.output?.find((o) => o.value === specs[2])?.label || "N/A"
        details["Operating Temperature"] =
          sensorType.specifications.operatingTemperature?.find((t) => t.value === specs[3])?.label || "N/A"
        break
      case "pressure":
        details["Accuracy"] = sensorType.specifications.accuracy?.find((a) => a.value === specs[0])?.label || "N/A"
        details["Output"] = sensorType.specifications.output?.find((o) => o.value === specs[1])?.label || "N/A"
        details["Pressure Range"] =
          sensorType.specifications.pressureRange?.find((p) => p.value === specs[2])?.label || "N/A"
        details["Operating Temperature"] =
          sensorType.specifications.operatingTemperature?.find((t) => t.value === specs[3])?.label || "N/A"
        break
      case "level":
        details["Accuracy"] = sensorType.specifications.accuracy?.find((a) => a.value === specs[0])?.label || "N/A"
        details["Temperature Output"] =
          sensorType.specifications.temperatureOutput?.find((t) => t.value === specs[1])?.label || "N/A"
        details["Communication Protocol"] =
          sensorType.specifications.communicationProtocol?.find((c) => c.value === specs[2])?.label || "N/A"
        details["Power Supply"] =
          sensorType.specifications.powerSupply?.find((p) => p.value === specs[3])?.label || "N/A"
        details["Temperature Range"] =
          sensorType.specifications.temperatureRange?.find((r) => r.value === specs[4])?.label || "N/A"
        break
    }

return { type: sensorType.name, details }
  }

const products = selectedProducts.map(getProductDetails).filter(Boolean)

if (products.length === 0) {
    return null
  }

const allSpecs = Array.from(new Set(products.flatMap((p) => Object.keys(p!.details))))

const handleExportCSV = () => {
    const csvContent = generateCSV(selectedProducts)
    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
    const link = document.createElement("a")
    if (link.download !== undefined) {
      const url = URL.createObjectURL(blob)
      link.setAttribute("href", url)
      link.setAttribute("download", "sensor_comparison.csv")
      link.style.visibility = "hidden"
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }

return (
    <Card className="mt-8 bg-[#1B2531] border-[#2a3744]">
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle className="text-[#40C4FF] text-xl font-normal">Product Comparison</CardTitle>
        <Button
          onClick={handleExportCSV}
          variant="outline"
          size="sm"
          className="text-[#40C4FF] border-[#40C4FF] hover:bg-[#2a3744]"
        >
          <Download className="mr-2 h-4 w-4" />
          Export CSV
        </Button>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="text-[#40C4FF]">Specification</TableHead>
              {products.map((product, index) => (
                <TableHead key={index} className="text-[#40C4FF]">
                  <div className="flex items-center justify-between">
                    <span>
                      {product!.type} - {product!.details["Model"]}
                    </span>
                    <Button
                      onClick={() => onRemove(selectedProducts[index])}
                      variant="ghost"
                      size="sm"
                      className="text-red-500 hover:text-red-700 hover:bg-transparent"
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  </div>
                </TableHead>
              ))}
            </TableRow>
          </TableHeader>
          <TableBody>
            {allSpecs.map((spec, index) => (
              <TableRow key={index}>
                <TableCell className="font-medium text-white">{spec}</TableCell>
                {products.map((product, productIndex) => (
                  <TableCell key={productIndex} className="text-gray-300">
                    {product!.details[spec] || "N/A"}
                  </TableCell>
                ))}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescript:file="utils/csv-export.ts" isMerged="true"
import { sensorTypes } from "@/lib/data"

export function generateCSV(selectedProducts: string[]): string {
  const getProductDetails = (productCode: string) => {
    const [type, model, ...specs] = productCode.split("-")
    const sensorType = sensorTypes.find((s) => s.id === type)
    if (!sensorType) return null

const details: Record<string, string> = {
      Type: sensorType.name,
      Model: model,
    }

return details
  }

const products = selectedProducts.map(getProductDetails).filter(Boolean) as Record<string, string>[]

if (products.length === 0) {
    return ""
  }

const headers = Object.keys(products[0])
  const csvContent = [
    headers.join(","),
    ...products.map((product) => headers.map((header) => `"${product[header]}"`).join(",")),
  ].join("\n")

return csvContent
}

[V0_FILE]typescriptreact:file="components/product-selector.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Copy, Check, Plus, Thermometer, Wind, Gauge, Ruler } from "lucide-react"
import { sensorTypes, modelSpecifications } from "@/lib/data"
import { toast } from "sonner"
import { Input } from "@/components/ui/input"
import { ComparisonView } from "./comparison-view"
import { ProductCodeFormat } from "./product-code-format"

export function ProductSelector() {
  // Base states
  const [selectedType, setSelectedType] = useState("")
  const [model, setModel] = useState("")
  const [searchQuery, setSearchQuery] = useState("")
  const [copied, setCopied] = useState(false)
  const [comparisonList, setComparisonList] = useState<string[]>([])

// Specification states
  const [specs, setSpecs] = useState<Record<string, string>>({})

const selectedSensorType = sensorTypes.find((type) => type.id === selectedType)
  const selectedModel = model ? modelSpecifications[model as keyof typeof modelSpecifications] : null

const getSensorIcon = (type: string) => {
    switch (type) {
      case "temp-humid":
        return <Thermometer className="h-5 w-5" />
      case "air-quality":
        return <Wind className="h-5 w-5" />
      case "pressure":
        return <Gauge className="h-5 w-5" />
      case "level":
        return <Ruler className="h-5 w-5" />
      default:
        return null
    }
  }

const getRequiredSpecs = () => {
    if (!selectedModel || !selectedType) return []
    return Object.keys(selectedModel.availableOptions)
  }

const getSpecOptions = (specType: string) => {
    if (!selectedModel || !selectedType) return []

const availableOptions = selectedModel.availableOptions[specType]
    if (!availableOptions) return []

// If availableOptions is a string, it refers to a measureRange type
    if (typeof availableOptions === "string") {
      const rangeType = availableOptions
      return selectedSensorType?.specifications.measureRange?.[rangeType] || []
    }

// If availableOptions is an array of strings, map them to the specifications
    if (Array.isArray(availableOptions) && typeof availableOptions[0] === "string") {
      const specOptions = selectedSensorType?.specifications[specType]
      if (!Array.isArray(specOptions)) return []
      return specOptions.filter((opt) => availableOptions.includes(opt.value))
    }

// If availableOptions is already an array of objects with value and label
    if (Array.isArray(availableOptions) && typeof availableOptions[0] === "object") {
      return availableOptions
    }

return []
  }

const generateProductCode = () => {
    if (!selectedType || !model) return ""

const modelSpec = modelSpecifications[model as keyof typeof modelSpecifications]
    if (!modelSpec) return ""

// Check if all required specifications are selected
    const requiredSpecs = getRequiredSpecs()
    const hasAllRequiredSpecs = requiredSpecs.every((spec) => specs[spec])
    if (!hasAllRequiredSpecs) return ""

return modelSpec.generateCode(specs)
  }

const handleSpecChange = (specType: string, value: string) => {
    setSpecs((prev) => ({ ...prev, [specType]: value }))
  }

const resetSelections = () => {
    setSelectedType("")
    setModel("")
    setSpecs({})
    setSearchQuery("")
    setComparisonList([])
  }

const copyToClipboard = async () => {
    const code = generateProductCode()
    if (code) {
      await navigator.clipboard.writeText(code)
      setCopied(true)
      toast.success("Product code copied to clipboard!")
      setTimeout(() => setCopied(false), 2000)
    }
  }

const addToComparison = () => {
    const productCode = generateProductCode()
    if (productCode && !comparisonList.includes(productCode)) {
      setComparisonList((prev) => [...prev, productCode])
      toast.success("Product added to comparison")
    } else if (comparisonList.includes(productCode)) {
      toast.error("This product is already in the comparison list")
    }
  }

const removeFromComparison = (productCode: string) => {
    setComparisonList((prev) => prev.filter((code) => code !== productCode))
  }

const filteredSensorTypes = sensorTypes.filter((type) => type.name.toLowerCase().includes(searchQuery.toLowerCase()))

const getProductDescription = () => {
    if (!selectedSensorType || !model) return ""

const modelInfo = selectedSensorType.specifications.model.find((m) => m.value === model)
    if (!modelInfo) return ""

const specDescriptions = getRequiredSpecs()
      .map((spec) => {
        const specValue = specs[spec]
        const specOptions = getSpecOptions(spec)
        const specOption = specOptions.find((opt) => opt.value === specValue)
        if (!specOption) return null

return `${spec.replace(/([A-Z])/g, " $1").toLowerCase()}: ${specOption.label}`
      })
      .filter(Boolean)
      .join(", ")

return `${modelInfo.label} with ${specDescriptions}`
  }

return (
    <>
      <Card className="bg-[#1B2531] border-[#2a3744]">
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle className="text-[#40C4FF] text-xl font-normal">Select Product Specifications</CardTitle>
          <Button
            onClick={resetSelections}
            variant="outline"
            className="text-[#40C4FF] border-[#40C4FF] hover:bg-[#2a3744]"
          >
            Reset
          </Button>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Search and Type Selection */}
          <div className="space-y-2">
            <label className="text-sm text-white">Search Sensor Types:</label>
            <Input
              type="text"
              placeholder="Search..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="bg-[#1f2937] border-[#374151] text-white"
            />
          </div>

<div className="space-y-2">
            <label className="text-sm text-white">Sensor Type:</label>
            <Select
              value={selectedType}
              onValueChange={(value) => {
                setSelectedType(value)
                setModel("")
                setSpecs({})
              }}
            >
              <SelectTrigger className="bg-[#1f2937] border-[#374151] text-white">
                <SelectValue placeholder="Select sensor type">
                  {selectedType && (
                    <div className="flex items-center gap-2">
                      {getSensorIcon(selectedType)}
                      <span>{sensorTypes.find((t) => t.id === selectedType)?.name}</span>
                    </div>
                  )}
                </SelectValue>
              </SelectTrigger>
              <SelectContent className="bg-[#1f2937] border-[#374151]">
                {filteredSensorTypes.map((type) => (
                  <SelectItem key={type.id} value={type.id} className="text-white hover:bg-[#374151]">
                    <div className="flex items-center gap-2">
                      {getSensorIcon(type.id)}
                      <span>{type.name}</span>
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

{/* Model and Specifications */}
          {selectedSensorType && (
            <div className="grid gap-6 md:grid-cols-2">
              <div className="space-y-2">
                <label className="text-sm text-white">Model:</label>
                <Select
                  value={model}
                  onValueChange={(value) => {
                    setModel(value)
                    setSpecs({})
                  }}
                >
                  <SelectTrigger className="bg-[#1f2937] border-[#374151] text-white">
                    <SelectValue placeholder="Select model" />
                  </SelectTrigger>
                  <SelectContent className="bg-[#1f2937] border-[#374151]">
                    {selectedSensorType.specifications.model?.map((option) => (
                      <SelectItem key={option.value} value={option.value} className="text-white hover:bg-[#374151]">
                        {option.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

{model &&
                getRequiredSpecs().map((specType) => {
                  const specOptions = getSpecOptions(specType)
                  if (!specOptions.length) return null

return (
                    <div key={specType} className="space-y-2">
                      <label className="text-sm text-white capitalize">
                        {specType.replace(/([A-Z])/g, " $1").toLowerCase()}:
                      </label>
                      <Select
                        value={specs[specType] || ""}
                        onValueChange={(value) => handleSpecChange(specType, value)}
                      >
                        <SelectTrigger className="bg-[#1f2937] border-[#374151] text-white">
                          <SelectValue placeholder={`Select ${specType.replace(/([A-Z])/g, " $1").toLowerCase()}`} />
                        </SelectTrigger>
                        <SelectContent className="bg-[#1f2937] border-[#374151]">
                          {specOptions.map((option) => (
                            <SelectItem
                              key={option.value}
                              value={option.value}
                              className="text-white hover:bg-[#374151]"
                            >
                              {option.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  )
                })}
            </div>
          )}

{/* Product Code Display */}
          {generateProductCode() && (
            <>
              <div className="pt-4 space-y-4 border-t border-[#2a3744]">
                <div>
                  <div className="text-sm text-white">Product Code:</div>
                  <div className="text-lg font-medium text-[#40C4FF] mt-1">{generateProductCode()}</div>
                  <div className="text-sm text-gray-400 mt-2">{getProductDescription()}</div>
                  <div className="flex space-x-2 mt-4">
                    <Button
                      onClick={copyToClipboard}
                      variant="outline"
                      className="text-[#40C4FF] border-[#40C4FF] hover:bg-[#2a3744]"
                    >
                      {copied ? <Check className="h-4 w-4 mr-2" /> : <Copy className="h-4 w-4 mr-2" />}
                      {copied ? "Copied" : "Copy Code"}
                    </Button>
                    <Button
                      onClick={addToComparison}
                      variant="outline"
                      className="text-[#40C4FF] border-[#40C4FF] hover:bg-[#2a3744]"
                    >
                      <Plus className="h-4 w-4 mr-2" />
                      Add to Compare
                    </Button>
                  </div>
                </div>
              </div>
              <ProductCodeFormat model={model} specifications={selectedSensorType?.specifications || {}} />
            </>
          )}
        </CardContent>
      </Card>
      <ComparisonView selectedProducts={comparisonList} onRemove={removeFromComparison} />
    </>
  )
}

[V0_FILE]typescriptreact:file="components/product-code-format.tsx" isEdit="true" isQuickEdit="true"
interface ProductCodeFormatProps {
  model: string
  specifications: Record<string, any>
}

export function ProductCodeFormat({ model, specifications }: ProductCodeFormatProps) {
  const getSpecificationTable = () => {
    switch (model) {
      case "TxTH91-XP":
        return (
          <div className="grid gap-4 bg-[#1B2531] rounded-lg p-6">
            <div className="grid grid-cols-2 items-center border-b border-[#2a3744] pb-4">
              <div className="text-[#40C4FF] font-medium">TxTH91-XP</div>
              <div className="text-gray-300">Room Humidity and Temperature Sensor</div>
            </div>

{/* rest of code here */}
          </div>
        )
      case "TxTH28":
        return (
          <div className="grid gap-4 bg-[#1B2531] rounded-lg p-6">
            <div className="grid grid-cols-2 items-center border-b border-[#2a3744] pb-4">
              <div className="text-[#40C4FF] font-medium">TxTH28</div>
              <div className="text-gray-300">Indoor Temperature Humidity Sensor</div>
            </div>

<div className="grid grid-cols-2 gap-x-8 gap-y-4">
              <div>
                <div className="text-[#40C4FF] font-medium mb-2">Accuracy</div>
                <div className="grid gap-2">
                  <div className="flex justify-between text-gray-300">
                    <span>3</span>
                    <span>±3%RH(±0.3℃)</span>
                  </div>
                </div>
              </div>

<div>
                <div className="text-[#40C4FF] font-medium mb-2">Humidity Output</div>
                <div className="grid gap-2">
                  <div className="flex justify-between text-gray-300">
                    <span>A</span>
                    <span>4-20mA(Two-wired)</span>
                  </div>
                  <div className="flex justify-between text-gray-300">
                    <span>V10</span>
                    <span>0-10VDC(Three-wired)</span>
                  </div>
                  <div className="flex justify-between text-gray-300">
                    <span>RS</span>
                    <span>RS485/Modbus</span>
                  </div>
                  <div className="flex justify-between text-gray-300">
                    <span>N</span>
                    <span>No output</span>
                  </div>
                </div>
              </div>

<div>
                <div className="text-[#40C4FF] font-medium mb-2">Temperature Output</div>
                <div className="grid gap-2">
                  <div className="flex justify-between text-gray-300">
                    <span>A</span>
                    <span>4-20mA(Two-wired)</span>
                  </div>
                  <div className="flex justify-between text-gray-300">
                    <span>V10</span>
                    <span>0-10VDC(Three-wired)</span>
                  </div>
                  <div className="flex justify-between text-gray-300">
                    <span>RS</span>
                    <span>RS485/Modbus</span>
                  </div>
                  <div className="flex justify-between text-gray-300">
                    <span>1</span>
                    <span>PT1000C±0.2C@0C</span>
                  </div>
                  <div className="flex justify-between text-gray-300">
                    <span>2</span>
                    <span>PT100C±0.2C@0C</span>
                  </div>
                  <div className="flex justify-between text-gray-300">
                    <span>3</span>
                    <span>NTC20KC±0.4C@25C</span>
                  </div>
                  <div className="flex justify-between text-gray-300">
                    <span>5</span>
                    <span>NTC10K±0.4C@25C</span>
                  </div>
                  <div className="flex justify-between text-gray-300">
                    <span>N</span>
                    <span>No output</span>
                  </div>
                </div>
              </div>

<div>
                <div className="text-[#40C4FF] font-medium mb-2">Range</div>
                <div className="grid gap-2">
                  <div className="flex justify-between text-gray-300">
                    <span>0</span>
                    <span>Non</span>
                  </div>
                  <div className="flex justify-between text-gray-300">
                    <span>1</span>
                    <span>0-50C</span>
                  </div>
                  <div className="flex justify-between text-gray-300">
                    <span>2</span>
                    <span>-20-60</span>
                  </div>
                  <div className="flex justify-between text-gray-300">
                    <span>9</span>
                    <span>Customizable</span>
                  </div>
                </div>
              </div>

<div>
                <div className="text-[#40C4FF] font-medium mb-2">Display</div>
                <div className="grid gap-2">
                  <div className="flex justify-between text-gray-300">
                    <span>1</span>
                    <span>Without display</span>
                  </div>
                  <div className="flex justify-between text-gray-300">
                    <span>2</span>
                    <span>LCD digital display</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )
      case "TxT02":
        return (
          <div className="grid gap-4 bg-[#1B2531] rounded-lg p-6">
            <div className="grid grid-cols-2 items-center border-b border-[#2a3744] pb-4">
              <div className="text-[#40C4FF] font-medium">TxT02</div>
              <div className="text-gray-300">Air Temperature Transducer</div>
            </div>
            {/* rest of code here */}
          </div>
        )
      case "TxSL20":
        return (
          <div className="grid gap-4 bg-[#1B2531] rounded-lg p-6">
            <div className="grid grid-cols-2 items-center border-b border-[#2a3744] pb-4">
              <div className="text-[#40C4FF] font-medium">TxSL20</div>
              <div className="text-gray-300">Liquid Temperature and Level 2 in 1 Tranducer</div>
            </div>
            {/* rest of code here */}
          </div>
        )
      case "TxTHP":
        return (
          <div className="grid gap-4 bg-[#1B2531] rounded-lg p-6">
            <div className="grid grid-cols-2 items-center border-b border-[#2a3744] pb-4">
              <div className="text-[#40C4FF] font-medium">TxTHP</div>
              <div className="text-gray-300">Temperature and Humidity Transmitter Probe</div>
            </div>
            {/* rest of code here */}
          </div>
        )
      default:
        return null
    }
  }

return <div className="mt-8">{getSpecificationTable()}</div>
}
</article></body></html>