Nejcraft/nej-react-components
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

move to nru

Browse Source
This commit is contained in:
honzapatCZ 2024-10-17 23:19:38 +02:00
parent 7c0c57015e
commit 84868b3d52
5 changed files with 17 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
Flag.tsx
View File

@ -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>
);
}

0
Form/index.js
View File

17
Parts/Badge.js Normal file
View File

@ -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>
);
}

75
globalStyle.js
View File

@ -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

25
styledRegistry.js
View File

@ -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>
)
}