List products on sidebar

client/components/Product.tsx

@@ -0,0 +1,27 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+
+import './product.css';
+import ProductModel from '../constants/ProductModel';
+import slug from '../helpers/slug';
+
+interface ProductProps {
+    product: ProductModel;
+}
+
+const Product: React.FC<ProductProps> = ({ product }) => {
+    return (
+        <div className="product">
+            <a href={product.url}>
+                <img className="product__logo" src={`/assets/${slug(product.name)}.png`} alt={`${product.name} - ${product.description}`} />
+                <div className="product__desc">{product.description}</div>
+            </a>
+        </div>
+    );
+};
+
+export default Product;

client/components/product.css

@@ -0,0 +1,22 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.product {
+    border: 1px solid rgba(0, 0, 0, .3);
+    border-radius: 0.5rem;
+    margin: 1rem 0;
+    overflow: hidden;
+}
+.product a {
+    text-decoration: none;
+}
+.product__logo {
+    height: auto;
+    width: 100%;
+}
+.product__desc {
+    padding: 0.5rem;
+    text-align: center;
+}