yinkakun

export interface CircularProgressProps {
  progress: number;
  size: number;
}

export const CircularProgress = ({ progress, size }: CircularProgressProps) => {
  // Calculate the percentage of the size
  const xPercentOfSize = (x: number) => (x / 100) * size;

  const strokeWidth = xPercentOfSize(8);

yinkakun

yinkakun

export default function App() {
  return (
    <div
      style={{
        height: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-around",
      }}
    >

yinkakun

// Type definitions for React 18.2
// Project: https://react.dev/
// Definitions by: Asana <https://asana.com>
//                 AssureSign <http://www.assuresign.com>
//                 Microsoft <https://microsoft.com>
//                 John Reilly <https://github.com/johnnyreilly>
//                 Benoit Benezech <https://github.com/bbenezech>
//                 Patricio Zavolinsky <https://github.com/pzavolinsky>
//                 Eric Anderson <https://github.com/ericanderson>
//                 Dovydas Navickas <https://github.com/DovydasNavickas>

yinkakun

export function isAndroid(): boolean {
  return (
    typeof navigator !== 'undefined' && /android/i.test(navigator.userAgent)
  );
}

export function isSmallIOS(): boolean {
  return (
    typeof navigator !== 'undefined' && /iPhone|iPod/.test(navigator.userAgent)
  );

yinkakun

/* GLOBALLY */

* {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}

*::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

yinkakun

import React from 'react';

type Props = React.ComponentProps<'input'> & {};

export const NumericInput = React.forwardRef<HTMLInputElement, Props>(
  ({ className, onChange, ...props }, forwardedRef) => {
    const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
      const numericValue = event.currentTarget.value.replace(/[^0-9]/g, '');
      event.currentTarget.value = numericValue;
      if (onChange) {

yinkakun

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

type ButtonProps = React.ComponentProps<'button'>;

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(

yinkakun

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

yinkakun

type CreateQueryStringsOpts = {
  [key: string]: string;
};

export const createQueryStrings = (opts: CreateQueryStringsOpts) => {
  const params = new URLSearchParams();
  Object.keys(opts).forEach((key) => params.set(key, opts[key]));
  return params.toString();
};