move to nru

Flag.tsx

@@ -1,12 +0,0 @@
-import { Country } from "@services/accounting-api";
-import { lazy, Suspense } from 'react';
-
-export default function Flag({ country, ...props }: { country: Country | "EU" }) {
-  const FlagIcon = lazy(() => import(`country-flag-icons/react/3x2`).then(module => ({ default: module[country] })));
-
-  return (
-    <Suspense fallback={<div {...props}>...</div>}>
-      <FlagIcon {...props}/>
-    </Suspense>
-  );
-}

Parts/Badge.js

@@ -0,0 +1,17 @@
+import { useTranslation } from "react-i18next";
+import tw, { styled } from "twin.macro";
+import "styled-components/macro";
+
+export function Badge({ color, text, ...props }) {
+  const colors = {
+    yellow: tw`bg-yellow-500`,
+    gray: tw`bg-gray-500`,
+    red: tw`bg-red-700`,
+  };
+
+  const realColor = (typeof(color) === "string" && color in colors) ? colors[color] : color;
+
+  return (
+    <p css={[tw`px-2 py-1 inline text-primary text-xs font-semibold uppercase  rounded-full `, realColor]} {...props}>{text}</p>
+  );
+}

globalStyle.js

@@ -1,75 +0,0 @@
-import { createGlobalStyle } from "styled-components"
-import tw, { theme, GlobalStyles as BaseStyles } from "twin.macro"
-
-const CustomStyles = createGlobalStyle`
-body {
-  -webkit-tap-highlight-color: ${theme`colors.accent`};
-}
-  
-:root{
-  --primary: #3d3d3d;
-  --secondary: #535353;
-  --trinary: #2c2c2c;
-  
-  --primary-text: #ffffff;
-  --secondary-text: #a0a0a0;
-
-  --primary-invert: #f3f3f3;
-  --secondary-invert: #dbdbdb;
-  --trinary-invert: #ffffff;
-  
-  --primary-invert-text: #3d3d3d;
-  --secondary-invert-text: #535353;
-
-  --accent: #00C800;
-  --accent-dark: #008f00;
-  --accent-light: #00ed00;
-  --accent2: #3080FF;
-  --accent2-dark: #225ab4;
-  --accent3: #804000;
-  --accent3-dark: #472400;
-  --accent4: #F8B02C;
-  --accent4-dark: #bd8724;
-  --accent5: #9E3086;
-  --accent5-dark: #6b215b;
-}
-
-.light\-theme{
-  --primary: #f3f3f3;
-  --secondary: #dbdbdb;
-  --trinary: #ffffff;
-  --primary-text: #3d3d3d;
-  --secondary-text: #535353;
-
-  
-  --primary-invert: #3d3d3d;
-  --secondary-invert: #535353;
-  --trinary-invert: #2c2c2c;
-  --primary-text-invert: #ffffff;
-  --secondary-text-invert: #a0a0a0;
-}
-
-
-::-webkit-scrollbar {
-  width: 0.5rem;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background: var(--secondary);
-  border-radius: 0.25rem;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: var(--accent-dark);
-}
-`
-
-const GlobalStyles = ({dontApplyBaseStyles}) => {
-  return <>  
-    {(!dontApplyBaseStyles) &&<BaseStyles />}
-    <CustomStyles />
-  </>
-}
-
-export default GlobalStyles

styledRegistry.js

@@ -1,25 +0,0 @@
-'use client'
-
-import React, { useState } from 'react'
-import { useServerInsertedHTML } from 'next/navigation'
-import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
-
-export default function StyledComponentsRegistry({ children }) {
-  // Only create stylesheet once with lazy initial state
-  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
-  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
-
-  useServerInsertedHTML(() => {
-    const styles = styledComponentsStyleSheet.getStyleElement()
-    styledComponentsStyleSheet.instance.clearTag()
-    return <>{styles}</>
-  })
-
-  if (typeof window !== 'undefined') return <>{children}</>
-
-  return (
-    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
-      {children}
-    </StyleSheetManager>
-  )
-}