/**
 * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
 * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
 */

import ProductModel from './ProductModel';

const ProductList: ProductModel[] = [
    {
        name: 'Intersection Observer Examples',
        url: 'https://intersectionobserver.io',
        description: 'Practical, real world examples of Intersection Observer',
        themeColor: '#024ca9',
    },
    {
        name: 'Blur Page',
        url: 'https://blur.page',
        description: 'A browser extension to hide sensitive information on a web page',
        themeColor: '#4e7fb8',
    },
    {
        name: 'Check Browsers Support',
        url: 'https://checkbrowsers.support',
        description: 'A browser extension to check browser compatibility without leaving your tab',
        themeColor: '#f33446',
    },
    {
        name: 'Form Validation',
        url: 'https://formvalidation.io',
        description: 'The best validation library for JavaScript',
        themeColor: '#014ba6',
    },
    {
        name: 'React PDF Viewer',
        url: 'https://react-pdf-viewer.dev',
        description: 'A React component to view a PDF document',
        themeColor: '#fb6303',
    },
    {
        name: '1 LOC',
        url: 'https://1loc.dev',
        description: 'Favorite JavaScript utilities in single line of code',
        themeColor: '#000200',
    },
    {
        name: 'Front-end Tips',
        url: 'https://getfrontend.tips',
        description: 'Super tiny, quick tips, tricks and best practices of front-end development',
        themeColor: '#2e2c74',
    },
    {
        name: 'HTML DOM',
        url: 'https://htmldom.dev',
        description: 'How to manage HTML DOM with vanilla JavaScript',
        themeColor: '#5b5d8a',
    },
    {
        name: 'Responsive Design Patterns',
        url: 'https://responsive.page',
        description: 'A collection of patterns to create a responsive web page',
        themeColor: '#43246d',
    },
    {
        name: 'this VS that',
        url: 'https://thisthat.dev',
        description: 'The differences between _ and _ in the front-end development',
        themeColor: '#414293',
    },
];

export { ProductList };