40 lines
1.6 KiB
Markdown
40 lines
1.6 KiB
Markdown
import React from 'react';
|
|
import './PlasticTypes.css';
|
|
|
|
const plasticTypes = [
|
|
{ code: '♳', name: 'PET', fullName: 'Polyethylene Terephthalate', uses: 'Soft drink bottles, water bottles, packaging' },
|
|
{ code: '♴', name: 'HDPE', fullName: 'High Density Polyethylene', uses: 'Milk bottles, detergent bottles, grocery bags' },
|
|
{ code: '♵', name: 'PVC', fullName: 'Polyvinyl Chloride', uses: 'Pipes, garden hoses, packagings, toys' },
|
|
{ code: '♶', name: 'LDPE', fullName: 'Low Density Polyethylene', uses: 'Plastic bags, squeeze bottles, cling film' },
|
|
{ code: '♷', name: 'PP', fullName: 'Polypropylene', uses: 'Bottle lids, straws, medicine containers' },
|
|
{ code: '♸', name: 'PS', fullName: 'Polystyrene', uses: 'Disposable cups, cutlery, takeaway containers' },
|
|
{ code: '♹', name: 'OTHER', fullName: 'Other Plastics', uses: 'CDs, sunglasses, nylon products' },
|
|
];
|
|
|
|
const PlasticTypes = () => (
|
|
<div className="plastic-table-container">
|
|
<h2 className="plastic-title">Plastic Types ♻️</h2>
|
|
<table className="plastic-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Code</th>
|
|
<th>Type</th>
|
|
<th>Full Name</th>
|
|
<th>Common Uses</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{plasticTypes.map(({code, name, fullName, uses}) => (
|
|
<tr key={name}>
|
|
<td className="code">{code}</td>
|
|
<td className="name">{name}</td>
|
|
<td className="fullName">{fullName}</td>
|
|
<td className="uses">{uses}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
|
|
export default PlasticTypes; |