DonHuskini

const LeftArrow = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="2rem"
      height="2rem"
      fill="currentColor"
      class="bi bi-arrow-left-short"
      viewBox="0 0 16 16"
    >

DonHuskini

const RightArrow = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="2rem"
      height="2rem"
      fill="currentColor"
      class="bi bi-arrow-right-short"
      viewBox="0 0 16 16"
    >

DonHuskini

import styled from "styled-components";
import LeftArrow from "../icons/LeftArrow";
import RightArrow from "../icons/RightArrow";

export const S = {};
S.ArrowButton = styled.button`
  background-color: transparent;
  border: none;
  position: absolute;
  z-index: 999;

DonHuskini

import styled from "styled-components";

const S = {};
S.CarouselItem = styled.div`
  padding: 0.5rem 0;
  border-bottom: solid 1px;

  img {
    width: 100%;
    height: 100%;

DonHuskini

import { useState } from "react";
import styled from "styled-components";
import { useSpringCarousel } from "react-spring-carousel-js";

import CarouselItem from "./CarouselItem";
import ArrowButton from "./ArrowButton";
import { S as StyledArrowButton } from "./ArrowButton";

const S = {};
S.Carousel = styled.div`

DonHuskini

import styled from "styled-components";

import ProductList from "./components/products/ProductList";
import items from "./assets/items.json";

const S = {};
S.Container = styled.div`
  max-width: 800px;
  margin: 0 auto;
`;

DonHuskini

const asyncTryCatch = async (tryer) => {
  try {
    const data = await tryer();
    return [data, null];
  } catch (error) {
    return [null, error];
  }
};

export default async function (req: NextApiRequest, res: NextApiResponse) {

DonHuskini

import { useRef, useEffect, useState } from "react";

export default function Test() {
  const [height, setHeight] = useState(0);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (ref.current) {
      setHeight((ref.current.clientWidth * 16) / 9);
    }

DonHuskini

import styled from '@emotion/styled'
import Image from 'next/image'
import { useProgressiveImage } from 'src/hooks/useProgressiveImage'

export function BlurredUpImage({ tiny, large, width, height, alt }) {
  const [src, { blur }] = useProgressiveImage(tiny, large)
  return <StyledImage src={src} width={width} height={height} alt={alt} blur={blur} />
}

const StyledImage = styled(Image)`

DonHuskini

# Command to check git default line ending:
# if true, it will auto-convert line endings. Windows => crlf, Linux/MAC => lf
`git config --global --get core.autocrlf`

# Command to update git default line ending
# will always be the same as in the repo. VSCode is smart enough to understand crlf and lf line endings.
`git config --global core.autocrlf false`

# Add ssh key/passphrase to ssh-agent so I can log into SSH servers without having to type passphrase every time
ssh-add ~/.ssh/id_rsa