When using dynamic classnames, further conditions can be added depending on whether the initial condition is true or false.

Example:

{icons &&
   icons.map((icon: any, index: number) => {
      return (
         <div
            key={index}
               className={cx(
                  "flex lg:ml-0 justify-start align-middle items-center",
                     {
                       "col-span-4": index % 2,   :point_left:
                       "col-span-3": !(index % 2),
                      }
                    )}>
                    {icon.icon}
                    <span className="items-center pl-5 text-12-22 text-gray-text tracking-2">
                      {icon.name}
                    </span>
                  </div>
                );
              })}

If the expression index % 2 (modulus) evaluates to true, the class name col-span-4 will be added. The second className which is col-span-3 and it is added if the expression !(index % 2) evaluates to true. However the ! mark changes the Boolean to false

So class col-span-4 is added when the index is even, whereas the class col-span-3 is added when the index is odd.

Using Material UI to create an interface, use the icons, buttons, layouts, navigation and other MUI components. Using the sx prop to add css to individual components without using styled or tailwind classes. install MUI:

npm install @mui/material @emotion/react @emotion/styled 

import the suitable components:

import { Box, IconButton, Paper, Typography } from "@mui/material";

simply use them like normal tags and add inline styles using the sx prop. The sx prop allows us to use a superset of css classes making it very intuitive to use.

 <Paper
      sx={{
        width: "90%",
        display: "flex",
        justifyContent: "space-between",
        pl: 1,
        mb: 1.5,
        boxShadow: "2px 2px 5px rgb(0 0 0 / 10%)",
      }}
    >

React.Children

We can use the React.Children APIs to modify elements created by React before they’re rendered. It provides utilities for dealing with the this.props.children opaque data structure.

For example :-

React.Children.count(children)

Returns the total number of components in children, equal to the number of times that a callback passed to map or forEach would be invoked

Using Material UI to create an interface, use the icons, buttons, layouts, navigation and other MUI components and adding styles using the sx prop.

I discovered that manipulating the elements is possible with React.cloneElement() function. This can be used when a parent component wants to add or change the props of its children.

React.cloneElement(element, [props], [...children])

The function mentioned above makes a clone of the first parameter which is element and returns an element with the desired changes. We can further pass props to it as well.

In order to take a database dump or restore it on fly.io, use flyctl proxy 5499:5432 -a <app-name>. Then one can do psql postgres://<username>:<password>@localhost:5499/<dbname> to connect to the remote db

Postgres index names are limited to maximum length of 63 characters. If index name is longer than 63 characters while running rails migration it throws error

Index name 'index_external_reservation_airport_transfers_on_external_reservation_id' on table 'external_reservation_airport_transfers' is too long; the limit is 63 characters

Fix is to explicitly specify the index name

t.references :external_reservation, null: false, foreign_key: true, index: {:name => 'idx_external_reservation_airport_transfers_external_reservation'}

If we want to query data for specific pages we can use PageQuery, however we cannot directly access the data. We will need to first destructure it first and then it can be passed as props.

const IndexPage = (data) => {