CocoClass_home/src/complates/Compare.js

import React, { useState } from 'react';
import { Table } from 'antd';
import '../asstes/css/Compare.css'
import CocoPiImg from '../asstes/img/CocoPi.png';
import MicrobitImg from '../asstes/img/Microbit.png';
import RaspberryImg from '../asstes/img/Raspberry.png';
const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
    },
    {
        title: 'CocoPi',
        dataIndex: 'CocoPi',
        key: 'CocoPi',
        align: 'center',
        render: (type, data) => {
            if (data.name === '圖片') {
                return <img src={data.CocoPi} alt=""></img>
            } else {
                return <div dangerouslySetInnerHTML={{ __html: data.CocoPi }}></div>
            }
        }
    },
    {
        title: 'Microbit V2',
        dataIndex: 'Microbit',
        key: 'Microbit',
        align: 'center',
        render: (type, data) => {
            if (data.name === '圖片') {
                return <img src={data.Microbit} alt=""></img>
            } else {
                return <div dangerouslySetInnerHTML={{ __html: data.Microbit }}></div>
            }
        }
    },
    {
        title: '樹莓派 Pi 4 （1GB）',
        dataIndex: 'Raspberry',
        key: 'Raspberry',
        align: 'center',
        render: (type, data) => {
            console.log(data)
            if (data.name === '圖片') {
                return <img src={data.Raspberry} alt=""></img>
            } else {
                return <div dangerouslySetInnerHTML={{ __html: data.Raspberry }}></div>
            }
        }
    },
];
const data = [
    {
        key: '1',
        name: '圖片',
        CocoPi: CocoPiImg,
        Microbit: MicrobitImg,
        Raspberry: RaspberryImg,
    },
    {
        key: '2',
        name: '處理器',
        CocoPi: "Allwinner V831",
        Microbit: "Nordic nRF52833",
        Raspberry: "Broadcom BCM2711",
    },
    {
        key: '3',
        name: '內存',
        CocoPi: "1GB",
        Microbit: "512KB",
        Raspberry: "1GB",
    },
    {
        key: '4',
        name: '連接',
        CocoPi: "<div>802.11n 無線 2.4GHz<br/>Type-C *1<br/>USB 2.0*1</div>",
        Microbit: "<div>藍牙 5.1 with BLE <br/>2.4GHz 無線</div>",
        Raspberry: "<div>2.4 GHz 和 5.0 GHz IEEE 802.11b/g/n/ac 無線<br/>藍牙 5.0, BLE<br/>LAN，千兆乙太網<br/>2 × USB 3.0 ports<br/>2 × USB 2.0 ports.</div>",
    },
    {
        key: '5',
        name: 'GPIO 引腳',
        CocoPi: "<div>標準 IIC/SPI/UART 介面<br/>標準私服馬達介面 *2<br/>標準電機介面 *2</div>",
        Microbit: "<div>5 環鱷魚夾<br/>19 板載針腳</div>",
        Raspberry: "<div>標準40針GPIO頭<br/>micro-HDM 埠*2 <br/>2通道MIPI DSI顯示埠<br/>2通道MIPI CSI攝像頭埠</div>",
    },
    {
        key: '6',
        name: '板載感測器',
        CocoPi: "<div>溫溼度感測器*1<br/>三軸陀螺儀和三軸加速度計*1<br/>麥克風*1<br/>光敏感測器*1<br/>200W 圖元MIPI攝像頭*1</div>",
        Microbit: "<div>三軸加速度計和磁力計 *1<br/>溫度感測器*1<br/>麥克風*1</div>",
        Raspberry: "無",
    },
    {
        key: '7',
        name: '板載執行器',
        CocoPi: "<div>揚聲器*1<br/>RGB LED*1<br/>2.8 英寸 顯示屏*1<br/>模擬伺服 *2<br/>模擬電機*2</div>",
        Microbit: "Speaker*1",
        Raspberry: "無",
    },
    {
        key: '8',
        name: '軟件',
        CocoPi: "Linux/C++/Python/Blockly/Scratch",
        Microbit: "C++/Python/Makecode/Scratch",
        Raspberry: "Linux/Raspbian/Windows",
    },
    {
        key: '9',
        name: '視頻',
        CocoPi: "<div>H.264，最高支持 1080P@30fps<br/>H.265，最高支持 1080P@30fps<br/>JPEG，最高支持 1080P@30fps</div>",
        Microbit: "無",
        Raspberry: "<div>H.265 (4Kp60 解碼);<br/>H.264 (1080p60 解碼, 1080p30 編碼);<br/>OpenGL ES, 3.0 圖形</div>",
    },
    {
        key: '10',
        name: '攝像頭',
        CocoPi: "200W 圖元MIPI攝像頭*1",
        Microbit: "無",
        Raspberry: "無",
    },
    {
        key: '11',
        name: '顯示幕',
        CocoPi: "2.8 英寸 顯示幕*1",
        Microbit: "5x5點陣燈屏",
        Raspberry: "無",
    },
    {
        key: '12',
        name: 'SD 卡支持',
        CocoPi: "微型 SD 卡槽",
        Microbit: "無",
        Raspberry: "微型 SD 卡槽",
    },
    {
        key: '13',
        name: '輸入電源',
        CocoPi: "<div>PH2.0端子<br/>Type-C<br/>USB 2.0</div>",
        Microbit: "<div>Micro USB<br/>帶鱷魚夾的邊緣連接器</div>",
        Raspberry: "<div>5V直流輸入（通過 USB-C口）<br/>5V直流輸入（通過 GPIO頭）<br/>乙太網供電（PoE）</div>",
    },
    {
        key: '14',
        name: '大小',
        CocoPi: "85.6*54*12mm",
        Microbit: "51.6*42*11.7mm",
        Raspberry: "85.6*56.5*11mm",
    },
    {
        key: '15',
        name: '官方價格',
        CocoPi: `<p class="compare_p">驚   喜   價</p>
        <a href="#Contact">
                    <Button class="compare_button"><span>聯絡我們</span></Button>
                </a>`,
        Microbit: "HK$160.12",
        Raspberry: "HK$385.79",
    },
];
const CompareStyle = {
    padding: '0 100px',
    textAlign: 'center',
}
const Compare = () => {
    return (
        <div>
            <h1>產品對比</h1>
            <div style={CompareStyle}>
                <Table
                    columns={columns}
                    pagination={false}
                    dataSource={data}
                    showSizeChanger={false}
                />
            </div>
        </div>
    );
};
export default Compare;