mirror of
https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git
synced 2025-12-06 13:43:59 -05:00
Most simple components created
This commit is contained in:
11
.gitignore
vendored
Normal file
11
.gitignore
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
node_modules
|
||||
dist
|
||||
*.local
|
||||
.tanstack
|
||||
|
||||
# Editor directories and files
|
||||
.vscode
|
||||
69
README.md
Normal file
69
README.md
Normal file
@@ -0,0 +1,69 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default tseslint.config([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
...tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
...tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
...tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default tseslint.config([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
37
eslint.config.js
Normal file
37
eslint.config.js
Normal file
@@ -0,0 +1,37 @@
|
||||
import js from "@eslint/js";
|
||||
import pluginRouter from "@tanstack/eslint-plugin-router";
|
||||
import reactHooks from "eslint-plugin-react-hooks";
|
||||
import reactRefresh from "eslint-plugin-react-refresh";
|
||||
import { globalIgnores } from "eslint/config";
|
||||
import globals from "globals";
|
||||
import tseslint from "typescript-eslint";
|
||||
|
||||
|
||||
export default tseslint.config([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
reactHooks.configs['recommended-latest'],
|
||||
reactRefresh.configs.vite,
|
||||
...pluginRouter.configs["flat/recommended"]
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser
|
||||
},
|
||||
plugins: {
|
||||
"react-hooks": reactHooks,
|
||||
"react-refresh": reactRefresh
|
||||
},
|
||||
rules: {
|
||||
...reactHooks.configs.recommended.rules,
|
||||
"react-refresh/only-export-components": [
|
||||
"warn",
|
||||
{ allowConstantExport: true }
|
||||
]
|
||||
}
|
||||
}
|
||||
]);
|
||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
26
lib/component/button.ts
Normal file
26
lib/component/button.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import Button from "./button/Button";
|
||||
import DangerButton from "./button/DangerButton";
|
||||
import DarkButton from "./button/DarkButton";
|
||||
import InfoButton from "./button/InfoButton";
|
||||
import LightButton from "./button/LightButton";
|
||||
import MoltenButton from "./button/MoltenButton";
|
||||
import PrimaryButton from "./button/PrimaryButton";
|
||||
import SecondaryButton from "./button/SecondaryButton";
|
||||
import SuccessButton from "./button/SuccessButton";
|
||||
import TertiaryButton from "./button/TertiaryButton";
|
||||
import WarningButton from "./button/WarningButton";
|
||||
|
||||
|
||||
export {
|
||||
Button,
|
||||
DangerButton,
|
||||
DarkButton,
|
||||
InfoButton,
|
||||
LightButton,
|
||||
MoltenButton,
|
||||
PrimaryButton,
|
||||
SecondaryButton,
|
||||
SuccessButton,
|
||||
TertiaryButton,
|
||||
WarningButton
|
||||
};
|
||||
57
lib/component/button/Button.tsx
Normal file
57
lib/component/button/Button.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
|
||||
|
||||
export default function Button(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
rounding = "lg",
|
||||
shape = "rectangle",
|
||||
size = "md",
|
||||
variant = "standard",
|
||||
disabled,
|
||||
...buttonProps
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<button
|
||||
{...buttonProps}
|
||||
disabled={disabled}
|
||||
className={clsx(
|
||||
className,
|
||||
//Rounding
|
||||
{
|
||||
"rounded-none": rounding === "none",
|
||||
"rounded-sm": rounding === "sm",
|
||||
"rounded": rounding === "md",
|
||||
"rounded-lg": rounding === "lg",
|
||||
"rounded-full": rounding === "full"
|
||||
},
|
||||
//Size and shape
|
||||
{
|
||||
"p-0": size === "xs" && shape === "square",
|
||||
"p-1": size === "sm" && shape === "square",
|
||||
"p-2": size === "md" && shape === "square",
|
||||
"p-3": size === "lg" && shape === "square",
|
||||
"p-4": size === "xl" && shape === "square",
|
||||
|
||||
"px-1 py-0": size === "xs" && shape === "rectangle",
|
||||
"px-2 py-1": size === "sm" && shape === "rectangle",
|
||||
"px-4 py-2": size === "md" && shape === "rectangle",
|
||||
"px-6 py-3": size === "lg" && shape === "rectangle",
|
||||
"px-8 py-4": size === "xl" && shape === "rectangle",
|
||||
},
|
||||
//Variant
|
||||
{
|
||||
"border": variant === "standard" || variant === "outline" || variant === "outline-ghost",
|
||||
"border-none": variant === "ghost" || variant === "icon"
|
||||
},
|
||||
//Disabled
|
||||
{
|
||||
"cursor-pointer": !disabled
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/DangerButton.tsx
Normal file
46
lib/component/button/DangerButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function DangerButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
className,
|
||||
//Background
|
||||
{
|
||||
"bg-red-600 hover:bg-red-700 active:bg-red-800": (variant === "standard") && (!disabled),
|
||||
"bg-red-400/80": (variant === "standard") && (disabled),
|
||||
"bg-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-red-600 active:bg-red-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Outline
|
||||
{
|
||||
"border-red-600 hover:border-red-700 active:border-red-800": (variant === "standard" || variant === "outline") && (!disabled),
|
||||
"border-red-400/80": (variant === "standard" || variant === "outline") && (disabled),
|
||||
"border-red-600 hover:border-red-600 active:border-red-700": (variant === "outline-ghost") && (!disabled),
|
||||
"border-red-400/80 ": (variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Text
|
||||
{
|
||||
"text-white": variant === "standard",
|
||||
"text-red-600 hover:text-red-700 active:text-red-800": (variant === "outline" || variant === "icon") && (!disabled),
|
||||
"text-red-400/80": (variant === "outline" || variant === "icon") && (disabled),
|
||||
"text-red-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"text-red-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/DarkButton.tsx
Normal file
46
lib/component/button/DarkButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function DarkButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
className,
|
||||
//Background
|
||||
{
|
||||
"bg-black hover:bg-neutral-700 active:bg-neutral-600": (variant === "standard") && (!disabled),
|
||||
"bg-neutral-700/80": (variant === "standard") && (disabled),
|
||||
"bg-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-black active:bg-neutral-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Outline
|
||||
{
|
||||
"border-black hover:border-neutral-700 active:border-neutral-600": (variant === "standard" || variant === "outline") && (!disabled),
|
||||
"border-neutral-700/80": (variant === "standard" || variant === "outline") && (disabled),
|
||||
"border-black hover:border-black active:border-neutral-700": (variant === "outline-ghost") && (!disabled),
|
||||
"border-neutral-700/80 ": (variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Text
|
||||
{
|
||||
"text-white": variant === "standard",
|
||||
"text-black hover:text-neutral-700 active:text-neutral-600": (variant === "outline" || variant === "icon") && (!disabled),
|
||||
"text-neutral-700/80": (variant === "outline" || variant === "icon") && (disabled),
|
||||
"text-black hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"text-neutral-700/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/InfoButton.tsx
Normal file
46
lib/component/button/InfoButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function InfoButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
className,
|
||||
//Background
|
||||
{
|
||||
"bg-cyan-500 hover:bg-cyan-600 active:bg-cyan-700": (variant === "standard") && (!disabled),
|
||||
"bg-sky-300/80": (variant === "standard") && (disabled),
|
||||
"bg-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-cyan-500 active:bg-cyan-600": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Outline
|
||||
{
|
||||
"border-cyan-500 hover:border-cyan-600 active:border-cyan-700": (variant === "standard" || variant === "outline") && (!disabled),
|
||||
"border-sky-300/80": (variant === "standard" || variant === "outline") && (disabled),
|
||||
"border-cyan-500 hover:border-cyan-500 active:border-cyan-600": (variant === "outline-ghost") && (!disabled),
|
||||
"border-sky-300/80 ": (variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Text
|
||||
{
|
||||
"text-black": variant === "standard",
|
||||
"text-cyan-500 hover:text-cyan-600 active:text-cyan-700": (variant === "outline" || variant === "icon") && (!disabled),
|
||||
"text-sky-300/80": (variant === "outline" || variant === "icon") && (disabled),
|
||||
"text-cyan-500 hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"text-sky-300/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/LightButton.tsx
Normal file
46
lib/component/button/LightButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function LightButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
className,
|
||||
//Background
|
||||
{
|
||||
"bg-white hover:bg-neutral-300 active:bg-neutral-400": (variant === "standard") && (!disabled),
|
||||
"bg-neutral-400/80": (variant === "standard") && (disabled),
|
||||
"bg-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-white active:bg-neutral-300": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Outline
|
||||
{
|
||||
"border-white hover:border-neutral-300 active:border-neutral-400": (variant === "standard" || variant === "outline") && (!disabled),
|
||||
"border-neutral-400/80": (variant === "standard" || variant === "outline") && (disabled),
|
||||
"border-white hover:border-white active:border-neutral-300": (variant === "outline-ghost") && (!disabled),
|
||||
"border-neutral-400/80 ": (variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Text
|
||||
{
|
||||
"text-black": variant === "standard",
|
||||
"text-white hover:text-neutral-300 active:text-neutral-400": (variant === "outline" || variant === "icon") && (!disabled),
|
||||
"text-neutral-400/80": (variant === "outline" || variant === "icon") && (disabled),
|
||||
"text-white hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"text-neutral-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/MoltenButton.tsx
Normal file
46
lib/component/button/MoltenButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function MoltenButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
className,
|
||||
//Background
|
||||
{
|
||||
"bg-orange-600 hover:bg-orange-700 active:bg-orange-800": (variant === "standard") && (!disabled),
|
||||
"bg-orange-400/80": (variant === "standard") && (disabled),
|
||||
"bg-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-orange-600 active:bg-orange-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Outline
|
||||
{
|
||||
"border-orange-600 hover:border-orange-700 active:border-orange-800": (variant === "standard" || variant === "outline") && (!disabled),
|
||||
"border-orange-400/80": (variant === "standard" || variant === "outline") && (disabled),
|
||||
"border-orange-600 hover:border-orange-600 active:border-orange-700": (variant === "outline-ghost") && (!disabled),
|
||||
"border-orange-400/80 ": (variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Text
|
||||
{
|
||||
"text-white": variant === "standard",
|
||||
"text-orange-600 hover:text-orange-700 active:text-orange-800": (variant === "outline" || variant === "icon") && (!disabled),
|
||||
"text-orange-400/80": (variant === "outline" || variant === "icon") && (disabled),
|
||||
"text-orange-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"text-orange-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/PrimaryButton.tsx
Normal file
46
lib/component/button/PrimaryButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function PrimaryButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
className,
|
||||
//Background
|
||||
{
|
||||
"bg-blue-600 hover:bg-blue-700 active:bg-blue-800": (variant === "standard") && (!disabled),
|
||||
"bg-blue-400/80": (variant === "standard") && (disabled),
|
||||
"bg-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-blue-600 active:bg-blue-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Outline
|
||||
{
|
||||
"border-blue-600 hover:border-blue-700 active:border-blue-800": (variant === "standard" || variant === "outline") && (!disabled),
|
||||
"border-blue-400/80": (variant === "standard" || variant === "outline") && (disabled),
|
||||
"border-blue-600 hover:border-blue-600 active:border-blue-700": (variant === "outline-ghost") && (!disabled),
|
||||
"border-blue-400/80 ": (variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Text
|
||||
{
|
||||
"text-white": variant === "standard",
|
||||
"text-blue-600 hover:text-blue-700 active:text-blue-800": (variant === "outline" || variant === "icon") && (!disabled),
|
||||
"text-blue-400/80": (variant === "outline" || variant === "icon") && (disabled),
|
||||
"text-blue-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"text-blue-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/SecondaryButton.tsx
Normal file
46
lib/component/button/SecondaryButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function SecondaryButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
className,
|
||||
//Background
|
||||
{
|
||||
"bg-neutral-500 hover:bg-neutral-600 active:bg-neutral-700": (variant === "standard") && (!disabled),
|
||||
"bg-neutral-300/80": (variant === "standard") && (disabled),
|
||||
"bg-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-neutral-500 active:bg-neutral-600": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Outline
|
||||
{
|
||||
"border-neutral-500 hover:border-neutral-600 active:border-neutral-700": (variant === "standard" || variant === "outline") && (!disabled),
|
||||
"border-neutral-300/80": (variant === "standard" || variant === "outline") && (disabled),
|
||||
"border-neutral-500 hover:border-neutral-500 active:border-neutral-600": (variant === "outline-ghost") && (!disabled),
|
||||
"border-neutral-300/80 ": (variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Text
|
||||
{
|
||||
"text-white": variant === "standard",
|
||||
"text-neutral-500 hover:text-neutral-600 active:text-neutral-700": (variant === "outline" || variant === "icon") && (!disabled),
|
||||
"text-neutral-300/80": (variant === "outline" || variant === "icon") && (disabled),
|
||||
"text-neutral-500 hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"text-neutral-300/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/SuccessButton.tsx
Normal file
46
lib/component/button/SuccessButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function SuccessButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
className,
|
||||
//Background
|
||||
{
|
||||
"bg-green-600 hover:bg-green-700 active:bg-green-800": (variant === "standard") && (!disabled),
|
||||
"bg-green-400/80": (variant === "standard") && (disabled),
|
||||
"bg-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-green-600 active:bg-green-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Outline
|
||||
{
|
||||
"border-green-600 hover:border-green-700 active:border-green-800": (variant === "standard" || variant === "outline") && (!disabled),
|
||||
"border-green-400/80": (variant === "standard" || variant === "outline") && (disabled),
|
||||
"border-green-600 hover:border-green-600 active:border-green-700": (variant === "outline-ghost") && (!disabled),
|
||||
"border-green-400/80 ": (variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Text
|
||||
{
|
||||
"text-white": variant === "standard",
|
||||
"text-green-600 hover:text-green-700 active:text-green-800": (variant === "outline" || variant === "icon") && (!disabled),
|
||||
"text-green-400/80": (variant === "outline" || variant === "icon") && (disabled),
|
||||
"text-green-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"text-green-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/TertiaryButton.tsx
Normal file
46
lib/component/button/TertiaryButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function TertiaryButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
className,
|
||||
//Background
|
||||
{
|
||||
"bg-purple-600 hover:bg-purple-700 active:bg-purple-800": (variant === "standard") && (!disabled),
|
||||
"bg-purple-400/80": (variant === "standard") && (disabled),
|
||||
"bg-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-purple-600 active:bg-purple-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Outline
|
||||
{
|
||||
"border-purple-600 hover:border-purple-700 active:border-purple-800": (variant === "standard" || variant === "outline") && (!disabled),
|
||||
"border-purple-400/80": (variant === "standard" || variant === "outline") && (disabled),
|
||||
"border-purple-600 hover:border-purple-600 active:border-purple-700": (variant === "outline-ghost") && (!disabled),
|
||||
"border-purple-400/80 ": (variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Text
|
||||
{
|
||||
"text-white": variant === "standard",
|
||||
"text-purple-600 hover:text-purple-700 active:text-purple-800": (variant === "outline" || variant === "icon") && (!disabled),
|
||||
"text-purple-400/80": (variant === "outline" || variant === "icon") && (disabled),
|
||||
"text-purple-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"text-purple-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/WarningButton.tsx
Normal file
46
lib/component/button/WarningButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function WarningButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
className,
|
||||
//Background
|
||||
{
|
||||
"bg-yellow-500 hover:bg-yellow-600 active:bg-yellow-700": (variant === "standard") && (!disabled),
|
||||
"bg-yellow-300/80": (variant === "standard") && (disabled),
|
||||
"bg-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-yellow-500 active:bg-yellow-600": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Outline
|
||||
{
|
||||
"border-yellow-500 hover:border-yellow-600 active:border-yellow-700": (variant === "standard" || variant === "outline") && (!disabled),
|
||||
"border-yellow-300/80": (variant === "standard" || variant === "outline") && (disabled),
|
||||
"border-yellow-500 hover:border-yellow-500 active:border-yellow-600": (variant === "outline-ghost") && (!disabled),
|
||||
"border-yellow-300/80 ": (variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Text
|
||||
{
|
||||
"text-black": variant === "standard",
|
||||
"text-yellow-500 hover:text-yellow-600 active:text-yellow-700": (variant === "outline" || variant === "icon") && (!disabled),
|
||||
"text-yellow-300/80": (variant === "outline" || variant === "icon") && (disabled),
|
||||
"text-yellow-500 hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"text-yellow-300/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
10
lib/component/input.ts
Normal file
10
lib/component/input.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import OptionInput from "./input/OptionInput";
|
||||
import SelectInput from "./input/SelectInput";
|
||||
import TextInput from "./input/TextInput";
|
||||
|
||||
|
||||
export {
|
||||
OptionInput,
|
||||
SelectInput,
|
||||
TextInput
|
||||
};
|
||||
27
lib/component/input/OptionInput.tsx
Normal file
27
lib/component/input/OptionInput.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import type { OptionInputProps } from "$/types/Input";
|
||||
import { ListboxOption } from "@headlessui/react";
|
||||
import clsx from "clsx";
|
||||
|
||||
|
||||
export default function OptionInput(props: OptionInputProps){
|
||||
const {
|
||||
id,
|
||||
className,
|
||||
value,
|
||||
children
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<ListboxOption
|
||||
id={id}
|
||||
className={clsx(
|
||||
"cursor-pointer",
|
||||
className
|
||||
)}
|
||||
value={value}
|
||||
>
|
||||
{children}
|
||||
</ListboxOption>
|
||||
);
|
||||
}
|
||||
41
lib/component/input/SelectInput.tsx
Normal file
41
lib/component/input/SelectInput.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import type { SelectInputProps } from "$/types/Input";
|
||||
import { Listbox, ListboxButton, ListboxOptions } from "@headlessui/react";
|
||||
import clsx from "clsx";
|
||||
import { BsChevronDown } from "react-icons/bs";
|
||||
|
||||
|
||||
export default function SelectInput(props: SelectInputProps){
|
||||
const {
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
children
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Listbox
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
>
|
||||
<div
|
||||
className="relative w-full"
|
||||
>
|
||||
<ListboxButton
|
||||
className={clsx(
|
||||
"flex flex-row items-center justify-between w-full",
|
||||
"outline rounded px-2 py-1"
|
||||
)}
|
||||
>
|
||||
<span>{label}</span>
|
||||
<span><BsChevronDown size={22}/></span>
|
||||
</ListboxButton>
|
||||
<ListboxOptions
|
||||
className="absolute w-full max-h-60 overflow-scroll z-10 outline-none"
|
||||
>
|
||||
{children}
|
||||
</ListboxOptions>
|
||||
</div>
|
||||
</Listbox>
|
||||
);
|
||||
}
|
||||
57
lib/component/input/TextInput.tsx
Normal file
57
lib/component/input/TextInput.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import type { TextInputProps } from "$/types/Input";
|
||||
import clsx from "clsx";
|
||||
|
||||
|
||||
export default function TextInput(props: TextInputProps){
|
||||
const {
|
||||
id,
|
||||
className,
|
||||
inputClassName,
|
||||
labelClassName,
|
||||
placeholder,
|
||||
defaultValue,
|
||||
value,
|
||||
onChange,
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"flex flex-row items-center justify-center rounded-lg border-2",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="relative flex flex-row items-center justify-center px-2 py-1"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id={id}
|
||||
className={clsx(
|
||||
"peer bg-transparent outline-none placeholder-transparent",
|
||||
inputClassName
|
||||
)}
|
||||
placeholder={placeholder}
|
||||
defaultValue={defaultValue}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<label
|
||||
className={clsx(
|
||||
"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",
|
||||
"peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:bg-transparent peer-placeholder-shown:h-full peer-placeholder-shown:cursor-text",
|
||||
"flex items-center",
|
||||
labelClassName
|
||||
)}
|
||||
style={{ transitionProperty: "top,, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
|
||||
htmlFor={id}
|
||||
>
|
||||
{placeholder}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
lib/component/input/switch/DangerSwitch.tsx
Normal file
7
lib/component/input/switch/DangerSwitch.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function DangerSwitch(){
|
||||
return (
|
||||
<div>
|
||||
Danger Switch
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
lib/component/input/switch/DarkSwitch.tsx
Normal file
7
lib/component/input/switch/DarkSwitch.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function DarkSwitch(){
|
||||
return (
|
||||
<div>
|
||||
Dark Switch
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
lib/component/input/switch/LightSwitch.tsx
Normal file
7
lib/component/input/switch/LightSwitch.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function LightSwitch(){
|
||||
return (
|
||||
<div>
|
||||
Light Switch
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
lib/component/input/switch/PlainSwitch.tsx
Normal file
7
lib/component/input/switch/PlainSwitch.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function PlainSwitch(){
|
||||
return (
|
||||
<div>
|
||||
Plain Switch
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
lib/component/input/switch/PrimarySwitch.tsx
Normal file
7
lib/component/input/switch/PrimarySwitch.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function PrimarySwitch(){
|
||||
return (
|
||||
<div>
|
||||
Primary Switch
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
lib/component/input/switch/SecondarySwitch.tsx
Normal file
7
lib/component/input/switch/SecondarySwitch.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function SecondarySwitch(){
|
||||
return (
|
||||
<div>
|
||||
Secondary Switch
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
lib/component/input/switch/SuccessDangerSwitch.tsx
Normal file
7
lib/component/input/switch/SuccessDangerSwitch.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function SuccessDangerSwitch(){
|
||||
return (
|
||||
<div>
|
||||
Success Danger Switch
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
lib/component/input/switch/SuccessSwitch.tsx
Normal file
7
lib/component/input/switch/SuccessSwitch.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function SuccessSwitch(){
|
||||
return (
|
||||
<div>
|
||||
Success Switch
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
lib/component/input/switch/Switch.tsx
Normal file
7
lib/component/input/switch/Switch.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function Switch(){
|
||||
return (
|
||||
<div>
|
||||
Switch
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
lib/component/input/switch/TertiarySwitch.tsx
Normal file
7
lib/component/input/switch/TertiarySwitch.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function TertiarySwitch(){
|
||||
return (
|
||||
<div>
|
||||
Tertiary Switch
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
lib/component/input/switch/WarningSwitch.tsx
Normal file
7
lib/component/input/switch/WarningSwitch.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function WarningSwitch(){
|
||||
return (
|
||||
<div>
|
||||
Warning Switch
|
||||
</div>
|
||||
);
|
||||
}
|
||||
90
lib/component/loading.ts
Normal file
90
lib/component/loading.ts
Normal file
@@ -0,0 +1,90 @@
|
||||
|
||||
import CenterGrowingBars from "./loading/bar/CenterGrowingBars";
|
||||
import CircleBars from "./loading/bar/CircleBars";
|
||||
import FadingBars from "./loading/bar/FadingBars";
|
||||
import FadingGrowingBars from "./loading/bar/FadingGrowingBars";
|
||||
import GrowingBars from "./loading/bar/GrowingBars";
|
||||
import PulsingBlocks from "./loading/block/PulsingBlocks";
|
||||
import SlidingBlocks2 from "./loading/block/SlidingBlocks2";
|
||||
import SlidingBlocks3 from "./loading/block/SlidingBlocks3";
|
||||
import WaveBlocks from "./loading/block/WaveBlocks";
|
||||
import BouncingDots from "./loading/dot/BouncingDots";
|
||||
import CircleCenterDots from "./loading/dot/CircleCenterDots";
|
||||
import CircleFadingDots from "./loading/dot/CircleFadingDots";
|
||||
import CirclePulsingDots from "./loading/dot/CirclePulsingDots";
|
||||
import CircleRotatingDots from "./loading/dot/CircleRotatingDots";
|
||||
import CircleShrinkingDots from "./loading/dot/CircleShrinkingDots";
|
||||
import CircleSpinningDot from "./loading/dot/CircleSpinningDot";
|
||||
import CyclingDots from "./loading/dot/CyclingDots";
|
||||
import FadingDots from "./loading/dot/FadingDots";
|
||||
import PulsingDots from "./loading/dot/PulsingDots";
|
||||
import RotatingDots from "./loading/dot/RotatingDots";
|
||||
import SwellingDots from "./loading/dot/SwellingDots";
|
||||
import DoubleDrop from "./loading/drop/DoubleDrop";
|
||||
import DoubleWaveDrop from "./loading/drop/DoubleWaveDrop";
|
||||
import Drop from "./loading/drop/Drop";
|
||||
import QuickDrop from "./loading/drop/QuickDrop";
|
||||
import QuickWaveDrop from "./loading/drop/QuickWaveDrop";
|
||||
import TripleDrop from "./loading/drop/TripleDrop";
|
||||
import TripleWaveDrop from "./loading/drop/TripleWaveDrop";
|
||||
import WaveDrop from "./loading/drop/WaveDrop";
|
||||
import HalfSpinner from "./loading/spinner/HalfSpinner";
|
||||
import QuarterSpinner from "./loading/spinner/QuarterSpinner";
|
||||
import RubberSpinner from "./loading/spinner/RubberSpinner";
|
||||
import ThreeQuarterSpinner from "./loading/spinner/ThreeQuarterSpinner";
|
||||
import BouncingDot from "./loading/various/BouncingDot";
|
||||
import PulsingLine from "./loading/various/PulsingLine";
|
||||
import SpinningBinary from "./loading/various/SpinningBinary";
|
||||
import SpinningClock from "./loading/various/SpinningClock";
|
||||
import SpinningEclipse from "./loading/various/SpinningEclipse";
|
||||
import SpinningEclipseHalf from "./loading/various/SpinningEclipseHalf";
|
||||
import SpinningGalaxy from "./loading/various/SpinningGalaxy";
|
||||
import SpinningTadpole from "./loading/various/SpinningTadpole";
|
||||
import Wifi from "./loading/various/Wifi";
|
||||
|
||||
|
||||
export {
|
||||
BouncingDot,
|
||||
BouncingDots,
|
||||
CenterGrowingBars,
|
||||
CircleBars,
|
||||
CircleCenterDots,
|
||||
CircleFadingDots,
|
||||
CirclePulsingDots,
|
||||
CircleRotatingDots,
|
||||
CircleShrinkingDots,
|
||||
CircleSpinningDot,
|
||||
CyclingDots,
|
||||
DoubleDrop,
|
||||
DoubleWaveDrop,
|
||||
Drop,
|
||||
FadingBars,
|
||||
FadingDots,
|
||||
FadingGrowingBars,
|
||||
GrowingBars,
|
||||
HalfSpinner,
|
||||
PulsingBlocks,
|
||||
PulsingDots,
|
||||
PulsingLine,
|
||||
QuarterSpinner,
|
||||
QuickDrop,
|
||||
QuickWaveDrop,
|
||||
RotatingDots,
|
||||
RubberSpinner,
|
||||
SlidingBlocks2,
|
||||
SlidingBlocks3,
|
||||
SpinningBinary,
|
||||
SpinningClock,
|
||||
SpinningEclipse,
|
||||
SpinningEclipseHalf,
|
||||
SpinningGalaxy,
|
||||
SpinningTadpole,
|
||||
SwellingDots,
|
||||
ThreeQuarterSpinner,
|
||||
TripleDrop,
|
||||
TripleWaveDrop,
|
||||
WaveBlocks,
|
||||
WaveDrop,
|
||||
Wifi
|
||||
};
|
||||
|
||||
157
lib/component/loading/bar/CenterGrowingBars.tsx
Normal file
157
lib/component/loading/bar/CenterGrowingBars.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import type { LoadingBarsProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function CenterGrowingBars({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.6,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingBarsProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bars-scale-middle.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="1"
|
||||
y="6"
|
||||
width="2.8"
|
||||
height="12"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle3_${id}.begin+${animationDuration * 2 / 3}s`}
|
||||
attributeName="y"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="6;1;6"
|
||||
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle3_${id}.begin+${animationDuration * 2 / 3}s`}
|
||||
attributeName="height"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="12;22;12"
|
||||
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="5.8"
|
||||
y="6"
|
||||
width="2.8"
|
||||
height="12"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle3_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="y"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="6;1;6"
|
||||
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle3_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="height"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="12;22;12"
|
||||
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="10.6"
|
||||
y="6"
|
||||
width="2.8"
|
||||
height="12"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle3_${id}`}
|
||||
begin={`0;rectangle5_${id}.end-${animationDuration / 6}s`}
|
||||
attributeName="y"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="6;1;6"
|
||||
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
|
||||
/>
|
||||
<animate
|
||||
begin={`0;rectangle5_${id}.end-${animationDuration / 6}s`}
|
||||
attributeName="height"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="12;22;12"
|
||||
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="15.4"
|
||||
y="6"
|
||||
width="2.8"
|
||||
height="12"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle3_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="y"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="6;1;6"
|
||||
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle3_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="height"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="12;22;12"
|
||||
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="20.2"
|
||||
y="6"
|
||||
width="2.8"
|
||||
height="12"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle5_${id}`}
|
||||
begin={`rectangle3_${id}.begin+${animationDuration * 2 / 3}s`}
|
||||
attributeName="y"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="6;1;6"
|
||||
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle3_${id}.begin+${animationDuration * 2 / 3}s`}
|
||||
attributeName="height"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="12;22;12"
|
||||
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
|
||||
/>
|
||||
</rect>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
109
lib/component/loading/bar/CircleBars.tsx
Normal file
109
lib/component/loading/bar/CircleBars.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import type { LoadingBarsProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function CircleBars({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.75,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingBarsProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bars-rotate-fade.svg
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g>
|
||||
<rect
|
||||
x="11"
|
||||
y="1"
|
||||
width="2"
|
||||
height="5"
|
||||
opacity=".14"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<rect
|
||||
x="11"
|
||||
y="1"
|
||||
width="2"
|
||||
height="5"
|
||||
transform="rotate(30 12 12)"
|
||||
opacity=".29"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<rect
|
||||
x="11"
|
||||
y="1"
|
||||
width="2"
|
||||
height="5"
|
||||
transform="rotate(60 12 12)"
|
||||
opacity=".43"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<rect
|
||||
x="11"
|
||||
y="1"
|
||||
width="2"
|
||||
height="5"
|
||||
transform="rotate(90 12 12)"
|
||||
opacity=".57"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<rect
|
||||
x="11"
|
||||
y="1"
|
||||
width="2"
|
||||
height="5"
|
||||
transform="rotate(120 12 12)"
|
||||
opacity=".71"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<rect
|
||||
x="11"
|
||||
y="1"
|
||||
width="2"
|
||||
height="5"
|
||||
transform="rotate(150 12 12)"
|
||||
opacity=".86"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<rect
|
||||
x="11"
|
||||
y="1"
|
||||
width="2"
|
||||
height="5"
|
||||
transform="rotate(180 12 12)"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
calcMode="discrete"
|
||||
dur={animationDuration}
|
||||
values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
81
lib/component/loading/bar/FadingBars.tsx
Normal file
81
lib/component/loading/bar/FadingBars.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import type { LoadingBarsProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function FadingBars({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.75,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingBarsProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bars-fade.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="1"
|
||||
y="4"
|
||||
width="6"
|
||||
height="14"
|
||||
opacity="1"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle1_${id}`}
|
||||
begin={`0;rectangle3_${id}.end-${animationDuration / 3}s`}
|
||||
attributeName="opacity"
|
||||
dur={animationDuration}
|
||||
values="1;.2"
|
||||
fill="freeze"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="9"
|
||||
y="4"
|
||||
width="6"
|
||||
height="14"
|
||||
opacity=".4"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 5}s`}
|
||||
attributeName="opacity"
|
||||
dur={animationDuration}
|
||||
values="1;.2"
|
||||
fill="freeze"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="17"
|
||||
y="4"
|
||||
width="6"
|
||||
height="14"
|
||||
opacity=".3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle3_${id}`}
|
||||
begin={`rectangle1_${id}.begin+${animationDuration * 2 / 5}s`}
|
||||
attributeName="opacity"
|
||||
dur={animationDuration}
|
||||
values="1;.2"
|
||||
fill="freeze"
|
||||
/>
|
||||
</rect>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
123
lib/component/loading/bar/FadingGrowingBars.tsx
Normal file
123
lib/component/loading/bar/FadingGrowingBars.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import type { LoadingBarsProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function FadingGrowingBars({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.75,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingBarsProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bars-scale-fade.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="1"
|
||||
y="4"
|
||||
width="6"
|
||||
height="14"
|
||||
opacity="1"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle1_${id}`}
|
||||
begin={`0;rectangle3_${id}.end-${animationDuration / 3}s`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="1;5"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`0;rectangle3_${id}.end-${animationDuration / 3}s`}
|
||||
attributeName="height"
|
||||
dur={animationDuration}
|
||||
values="22;14"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`0;rectangle3_${id}.end-${animationDuration / 3}s`}
|
||||
attributeName="opacity"
|
||||
dur={animationDuration}
|
||||
values="1;.2"
|
||||
fill="freeze"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="9"
|
||||
y="4"
|
||||
width="6"
|
||||
height="14"
|
||||
opacity=".4"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 5}s`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="1;5"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 5}s`}
|
||||
attributeName="height"
|
||||
dur={animationDuration}
|
||||
values="22;14"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 5}s`}
|
||||
attributeName="opacity"
|
||||
dur={animationDuration}
|
||||
values="1;.2"
|
||||
fill="freeze"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="17"
|
||||
y="4"
|
||||
width="6"
|
||||
height="14"
|
||||
opacity=".3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle3_${id}`}
|
||||
begin={`rectangle1_${id}.begin+${animationDuration * 2 / 5}s`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="1;5"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration * 2 / 5}s`}
|
||||
attributeName="height"
|
||||
dur={animationDuration}
|
||||
values="22;14"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration * 2 / 5}s`}
|
||||
attributeName="opacity"
|
||||
dur={animationDuration}
|
||||
values="1;.2"
|
||||
fill="freeze"
|
||||
/>
|
||||
</rect>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
157
lib/component/loading/bar/GrowingBars.tsx
Normal file
157
lib/component/loading/bar/GrowingBars.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import type { LoadingBarsProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function GrowingBars({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.6,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingBarsProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bars-scale.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="1"
|
||||
y="6"
|
||||
width="2.8"
|
||||
height="12"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle1_${id}`}
|
||||
begin={`0;rectangle5_${id}.end-${animationDuration / 6}s`}
|
||||
attributeName="y"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="6;1;6"
|
||||
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
|
||||
/>
|
||||
<animate
|
||||
begin={`0;rectangle5_${id}.end-${animationDuration / 6}s`}
|
||||
attributeName="height"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="12;22;12"
|
||||
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="5.8"
|
||||
y="6"
|
||||
width="2.8"
|
||||
height="12"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="y"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="6;1;6"
|
||||
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="height"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="12;22;12"
|
||||
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="10.6"
|
||||
y="6"
|
||||
width="2.8"
|
||||
height="12"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="y"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="6;1;6"
|
||||
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="height"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="12;22;12"
|
||||
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="15.4"
|
||||
y="6"
|
||||
width="2.8"
|
||||
height="12"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="y"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="6;1;6"
|
||||
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="height"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="12;22;12"
|
||||
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="20.2"
|
||||
y="6"
|
||||
width="2.8"
|
||||
height="12"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle5_${id}`}
|
||||
begin={`rectangle1_${id}.begin+${animationDuration * 2 / 3}s`}
|
||||
attributeName="y"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="6;1;6"
|
||||
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration * 2 / 3}s`}
|
||||
attributeName="height"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="12;22;12"
|
||||
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
|
||||
/>
|
||||
</rect>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
183
lib/component/loading/block/PulsingBlocks.tsx
Normal file
183
lib/component/loading/block/PulsingBlocks.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import type { LoadingBlocksProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function PulsingBlocks({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.6,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingBlocksProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/blocks-scale.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="1.5"
|
||||
y="1.5"
|
||||
rx="1"
|
||||
width="9"
|
||||
height="9"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle1_${id}`}
|
||||
begin={`0;rectangle4_${id}.end+${animationDuration / 4}s`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="1.5;.5;1.5"
|
||||
keyTimes="0;.2;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`0;rectangle4_${id}.end+${animationDuration / 4}s`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="1.5;.5;1.5"
|
||||
keyTimes="0;.2;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`0;rectangle4_${id}.end+${animationDuration / 4}s`}
|
||||
attributeName="width"
|
||||
dur={animationDuration}
|
||||
values="9;11;9"
|
||||
keyTimes="0;.2;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`0;rectangle4_${id}.end+${animationDuration / 4}s`}
|
||||
attributeName="height"
|
||||
dur={animationDuration}
|
||||
values="9;11;9"
|
||||
keyTimes="0;.2;1"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="13.5"
|
||||
y="1.5"
|
||||
rx="1"
|
||||
width="9"
|
||||
height="9"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 4}s`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="13.5;12.5;13.5"
|
||||
keyTimes="0;.2;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 4}s`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="1.5;.5;1.5"
|
||||
keyTimes="0;.2;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 4}s`}
|
||||
attributeName="width"
|
||||
dur={animationDuration}
|
||||
values="9;11;9"
|
||||
keyTimes="0;.2;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 4}s`}
|
||||
attributeName="height"
|
||||
dur={animationDuration}
|
||||
values="9;11;9"
|
||||
keyTimes="0;.2;1"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="13.5"
|
||||
y="13.5"
|
||||
rx="1"
|
||||
width="9"
|
||||
height="9"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="13.5;12.5;13.5"
|
||||
keyTimes="0;.2;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="13.5;12.5;13.5"
|
||||
keyTimes="0;.2;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="width"
|
||||
dur={animationDuration}
|
||||
values="9;11;9"
|
||||
keyTimes="0;.2;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="height"
|
||||
dur={animationDuration}
|
||||
values="9;11;9"
|
||||
keyTimes="0;.2;1"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="1.5"
|
||||
y="13.5"
|
||||
rx="1"
|
||||
width="9"
|
||||
height="9"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle4_${id}`}
|
||||
begin={`rectangle1_${id}.begin+${animationDuration * 3 / 4}s`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="1.5;.5;1.5"
|
||||
keyTimes="0;.2;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration * 3 / 4}s`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="13.5;12.5;13.5"
|
||||
keyTimes="0;.2;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration * 3 / 4}s`}
|
||||
attributeName="width"
|
||||
dur={animationDuration}
|
||||
values="9;11;9"
|
||||
keyTimes="0;.2;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_${id}.begin+${animationDuration * 3 / 4}s`}
|
||||
attributeName="height"
|
||||
dur={animationDuration}
|
||||
values="9;11;9"
|
||||
keyTimes="0;.2;1"
|
||||
/>
|
||||
</rect>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
111
lib/component/loading/block/SlidingBlocks2.tsx
Normal file
111
lib/component/loading/block/SlidingBlocks2.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import type { LoadingBlocksProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function SlidingBlocks2({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.2,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingBlocksProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/blocks-shuffle-2.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="1"
|
||||
y="1"
|
||||
rx="1"
|
||||
width="10"
|
||||
height="10"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle1_1_${id}`}
|
||||
begin={`0;rectangle2_4_${id}.end`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="1;13"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`rectangle1_2_${id}`}
|
||||
begin={`rectangle2_1_${id}.end`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="1;13"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`rectangle1_3_${id}`}
|
||||
begin={`rectangle2_2_${id}.end`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="13;1"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`rectangle1_4_${id}`}
|
||||
begin={`rectangle2_3_${id}.end`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="13;1"
|
||||
fill="freeze"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="1"
|
||||
y="13"
|
||||
rx="1"
|
||||
width="10"
|
||||
height="10"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle2_1_${id}`}
|
||||
begin={`rectangle1_1_${id}.end`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="13;1"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`rectangle2_2_${id}`}
|
||||
begin={`rectangle1_2_${id}.end`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="1;13"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`rectangle2_3_${id}`}
|
||||
begin={`rectangle1_3_${id}.end`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="1;13"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`rectangle2_4_${id}`}
|
||||
begin={`rectangle1_4_${id}.end`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="13;1"
|
||||
fill="freeze"
|
||||
/>
|
||||
</rect>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
154
lib/component/loading/block/SlidingBlocks3.tsx
Normal file
154
lib/component/loading/block/SlidingBlocks3.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import type { LoadingBlocksProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function SlidingBlocks3({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.2,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingBlocksProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/blocks-shuffle-3.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="1"
|
||||
y="1"
|
||||
rx="1"
|
||||
width="10"
|
||||
height="10"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle1_1_${id}`}
|
||||
begin={`0;rectangle3_4_${id}.end`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="1;13"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`rectangle1_2_${id}`}
|
||||
begin={`rectangle3_1_${id}.end`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="1;13"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`rectangle1_3_${id}`}
|
||||
begin={`rectangle3_2_${id}.end`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="13;1"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`rectangle1_4_${id}`}
|
||||
begin={`rectangle3_3_${id}.end`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="13;1"
|
||||
fill="freeze"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="1"
|
||||
y="13"
|
||||
rx="1"
|
||||
width="10"
|
||||
height="10"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle2_1_${id}`}
|
||||
begin={`rectangle1_1_${id}.end`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="13;1"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`rectangle2_2_${id}`}
|
||||
begin={`rectangle1_2_${id}.end`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="1;13"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`rectangle2_3_${id}`}
|
||||
begin={`rectangle1_3_${id}.end`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="1;13"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`rectangle2_4_${id}`}
|
||||
begin={`rectangle1_4_${id}.end`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="13;1"
|
||||
fill="freeze"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="13"
|
||||
y="13"
|
||||
rx="1"
|
||||
width="10"
|
||||
height="10"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle3_1_${id}`}
|
||||
begin={`rectangle2_1_${id}.end`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="13;1"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`rectangle3_2_${id}`}
|
||||
begin={`rectangle2_2_${id}.end`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="13;1"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`rectangle3_3_${id}`}
|
||||
begin={`rectangle2_3_${id}.end`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="1;13"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`rectangle3_4_${id}`}
|
||||
begin={`rectangle2_4_${id}.end`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="1;13"
|
||||
fill="freeze"
|
||||
/>
|
||||
</rect>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
333
lib/component/loading/block/WaveBlocks.tsx
Normal file
333
lib/component/loading/block/WaveBlocks.tsx
Normal file
@@ -0,0 +1,333 @@
|
||||
import type { LoadingBlocksProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function WaveBlocks({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.6,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingBlocksProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/blocks-wave.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="1"
|
||||
y="1"
|
||||
width="7.33"
|
||||
height="7.33"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle1_1_${id}`}
|
||||
begin={`0;rectangle9_1_${id}.end+${animationDuration / 3}s`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="1;4;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`0;rectangle9_1_${id}.end+${animationDuration / 3}s`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="1;4;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`0;rectangle9_1_${id}.end+${animationDuration / 3}s`}
|
||||
attributeName="width"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
<animate
|
||||
begin={`0;rectangle9_1_${id}.end+${animationDuration / 3}s`}
|
||||
attributeName="height"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="8.33"
|
||||
y="1"
|
||||
width="7.33"
|
||||
height="7.33"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="8.33;11.33;8.33"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="1;4;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="width"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="height"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="1"
|
||||
y="8.33"
|
||||
width="7.33"
|
||||
height="7.33"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="1;4;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="8.33;11.33;8.33"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="width"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="height"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="15.66"
|
||||
y="1"
|
||||
width="7.33"
|
||||
height="7.33"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="15.66;18.66;15.66"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="1;4;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="width"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="height"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="8.33"
|
||||
y="8.33"
|
||||
width="7.33"
|
||||
height="7.33"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="8.33;11.33;8.33"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="8.33;11.33;8.33"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="width"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="height"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="1"
|
||||
y="15.66"
|
||||
width="7.33"
|
||||
height="7.33"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="1;4;1"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="15.66;18.66;15.66"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="width"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="height"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="15.66"
|
||||
y="8.33"
|
||||
width="7.33"
|
||||
height="7.33"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="15.66;18.66;15.66"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="8.33;11.33;8.33"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="width"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="height"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="8.33"
|
||||
y="15.66"
|
||||
width="7.33"
|
||||
height="7.33"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="8.33;11.33;8.33"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="15.66;18.66;15.66"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="width"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="height"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="15.66"
|
||||
y="15.66"
|
||||
width="7.33"
|
||||
height="7.33"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`rectangle9_1_${id}`}
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration * 2 / 3}s`}
|
||||
attributeName="x"
|
||||
dur={animationDuration}
|
||||
values="15.66;18.66;15.66"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration * 2 / 3}s`}
|
||||
attributeName="y"
|
||||
dur={animationDuration}
|
||||
values="15.66;18.66;15.66"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration * 2 / 3}s`}
|
||||
attributeName="width"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
<animate
|
||||
begin={`rectangle1_1_${id}.begin+${animationDuration * 2 / 3}s`}
|
||||
attributeName="height"
|
||||
dur={animationDuration}
|
||||
values="7.33;1.33;7.33"
|
||||
/>
|
||||
</rect>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
76
lib/component/loading/dot/BouncingDots.tsx
Normal file
76
lib/component/loading/dot/BouncingDots.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import type { LoadingDotsProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function BouncingDots({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.6,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingDotsProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-bounce.svg?short_path=50864c0
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="4"
|
||||
cy="12"
|
||||
r="3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
>
|
||||
<animate
|
||||
id={`firstBouncingDots_${id}`}
|
||||
begin={`0;lastBouncingDots_${id}.end+${animationDuration / 2}s`}
|
||||
attributeName="cy"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="12;6;12"
|
||||
keySplines=".33,.66,.66,1;.33,0,.66,.33"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
>
|
||||
<animate
|
||||
id={`secondBouncingDots_${id}`}
|
||||
begin={`firstBouncingDots_${id}.begin+${animationDuration / 5}s`}
|
||||
attributeName="cy"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="12;6;12"
|
||||
keySplines=".33,.66,.66,1;.33,0,.66,.33"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="20"
|
||||
cy="12"
|
||||
r="3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
>
|
||||
<animate
|
||||
id={`lastBouncingDots_${id}`}
|
||||
begin={`secondBouncingDots_${id}.begin+${animationDuration / 5}s`}
|
||||
attributeName="cy"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="12;6;12"
|
||||
keySplines=".33,.66,.66,1;.33,0,.66,.33"
|
||||
/>
|
||||
</circle>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
240
lib/component/loading/dot/CircleCenterDots.tsx
Normal file
240
lib/component/loading/dot/CircleCenterDots.tsx
Normal file
@@ -0,0 +1,240 @@
|
||||
import type { LoadingDotsProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function CircleCenterDots({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.6,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingDotsProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/6-dots-scale-middle.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="3"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle1_${id}`}
|
||||
begin={`0;circle3_${id}.end-${animationDuration * 5 / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="16.50"
|
||||
cy="4.21"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle2_${id}`}
|
||||
begin={`circle1_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="7.50"
|
||||
cy="4.21"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle3_${id}`}
|
||||
begin={`circle5_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="19.79"
|
||||
cy="7.50"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle4_${id}`}
|
||||
begin={`circle2_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="4.21"
|
||||
cy="7.50"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle5_${id}`}
|
||||
begin={`circle7_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="21.00"
|
||||
cy="12.00"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
>
|
||||
<animate
|
||||
id={`circle6_${id}`}
|
||||
begin={`circle4_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="3.00"
|
||||
cy="12.00"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle7_${id}`}
|
||||
begin={`circle9_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="19.79"
|
||||
cy="16.50"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle8_${id}`}
|
||||
begin={`circle6_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="4.21"
|
||||
cy="16.50"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle9_${id}`}
|
||||
begin={`circle11_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="16.50"
|
||||
cy="19.79"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle10_${id}`}
|
||||
begin={`circle8_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="7.50"
|
||||
cy="19.79"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle11_${id}`}
|
||||
begin={`circle12_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="21"
|
||||
r="0"
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
className={className}
|
||||
>
|
||||
<animate
|
||||
id={`circle12_${id}`}
|
||||
begin={`circle10_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
94
lib/component/loading/dot/CircleFadingDots.tsx
Normal file
94
lib/component/loading/dot/CircleFadingDots.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import type { LoadingDotsProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function CircleFadingDots({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.75,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingDotsProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/6-dots-rotate.svg
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="2.5"
|
||||
r="1.5"
|
||||
opacity=".14"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<circle
|
||||
cx="16.75"
|
||||
cy="3.77"
|
||||
r="1.5"
|
||||
opacity=".29"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<circle
|
||||
cx="20.23"
|
||||
cy="7.25"
|
||||
r="1.5"
|
||||
opacity=".43"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<circle
|
||||
cx="21.50"
|
||||
cy="12.00"
|
||||
r="1.5"
|
||||
opacity=".57"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<circle
|
||||
cx="20.23"
|
||||
cy="16.75"
|
||||
r="1.5"
|
||||
opacity=".71"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<circle
|
||||
cx="16.75"
|
||||
cy="20.23"
|
||||
r="1.5"
|
||||
opacity=".86"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="21.5"
|
||||
r="1.5"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
calcMode="discrete"
|
||||
dur={animationDuration}
|
||||
values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
251
lib/component/loading/dot/CirclePulsingDots.tsx
Normal file
251
lib/component/loading/dot/CirclePulsingDots.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import type { CirclePulsingDotsProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function CirclePulsingDots({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
rotationAnimationDuration = 6,
|
||||
growingAnimationDuration = 0.6,
|
||||
stroke,
|
||||
fill
|
||||
}: CirclePulsingDotsProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/12-dots-scale-rotate.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="3"
|
||||
r="1"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle1_${id}`}
|
||||
begin={`0;circle3_${id}.end-${growingAnimationDuration * 5 / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={growingAnimationDuration}
|
||||
values="1;2;1"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="16.50"
|
||||
cy="4.21"
|
||||
r="1"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle2_${id}`}
|
||||
begin={`circle1_${id}.begin+${growingAnimationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={growingAnimationDuration}
|
||||
values="1;2;1"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="7.50"
|
||||
cy="4.21"
|
||||
r="1"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle3_${id}`}
|
||||
begin={`circle5_${id}.begin+${growingAnimationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={growingAnimationDuration}
|
||||
values="1;2;1"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="19.79"
|
||||
cy="7.50"
|
||||
r="1"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle4_${id}`}
|
||||
begin={`circle2_${id}.begin+${growingAnimationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={growingAnimationDuration}
|
||||
values="1;2;1"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="4.21"
|
||||
cy="7.50"
|
||||
r="1"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle5_${id}`}
|
||||
begin={`circle7_${id}.begin+${growingAnimationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={growingAnimationDuration}
|
||||
values="1;2;1"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="21.00"
|
||||
cy="12.00"
|
||||
r="1"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle6_${id}`}
|
||||
begin={`circle4_${id}.begin+${growingAnimationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={growingAnimationDuration}
|
||||
values="1;2;1"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="3.00"
|
||||
cy="12.00"
|
||||
r="1"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle7_${id}`}
|
||||
begin={`circle9_${id}.begin+${growingAnimationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={growingAnimationDuration}
|
||||
values="1;2;1"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="19.79"
|
||||
cy="16.50"
|
||||
r="1"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle8_${id}`}
|
||||
begin={`circle6_${id}.begin+${growingAnimationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={growingAnimationDuration}
|
||||
values="1;2;1"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="4.21"
|
||||
cy="16.50"
|
||||
r="1"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle9_${id}`}
|
||||
begin={`circle11_${id}.begin+${growingAnimationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={growingAnimationDuration}
|
||||
values="1;2;1"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="16.50"
|
||||
cy="19.79"
|
||||
r="1"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle10_${id}`}
|
||||
begin={`circle8_${id}.begin+${growingAnimationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={growingAnimationDuration}
|
||||
values="1;2;1"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="7.50"
|
||||
cy="19.79"
|
||||
r="1"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle11_${id}`}
|
||||
begin={`circle12_${id}.begin+${growingAnimationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={growingAnimationDuration}
|
||||
values="1;2;1"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="21"
|
||||
r="1"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`circle12_${id}`}
|
||||
begin={`circle10_${id}.begin+${growingAnimationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={growingAnimationDuration}
|
||||
values="1;2;1"
|
||||
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
|
||||
/>
|
||||
</circle>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
dur={rotationAnimationDuration}
|
||||
values="360 12 12;0 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
97
lib/component/loading/dot/CircleRotatingDots.tsx
Normal file
97
lib/component/loading/dot/CircleRotatingDots.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import type { LoadingDotsProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function CircleRotatingDots({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 1.5,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingDotsProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/8-dots-rotate.svg
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g>
|
||||
<circle
|
||||
cx="3"
|
||||
cy="12"
|
||||
r="2"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<circle
|
||||
cx="21"
|
||||
cy="12"
|
||||
r="2"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="21"
|
||||
r="2"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="3"
|
||||
r="2"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<circle
|
||||
cx="5.64"
|
||||
cy="5.64"
|
||||
r="2"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<circle
|
||||
cx="18.36"
|
||||
cy="18.36"
|
||||
r="2"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<circle
|
||||
cx="5.64"
|
||||
cy="18.36"
|
||||
r="2"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<circle
|
||||
cx="18.36"
|
||||
cy="5.64"
|
||||
r="2"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
dur={animationDuration}
|
||||
values="0 12 12;360 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
264
lib/component/loading/dot/CircleShrinkingDots.tsx
Normal file
264
lib/component/loading/dot/CircleShrinkingDots.tsx
Normal file
@@ -0,0 +1,264 @@
|
||||
import type { LoadingDotsProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function CircleShrinkingDots({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.6,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingDotsProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/6-dots-scale.svg?short_path=17d1946
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="3"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`firstShrinkingDot_${id}`}
|
||||
begin={`0;thirdShrinkingDot_${id}.end-${animationDuration * 4 / 5}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keyTimes="0;.2;1"
|
||||
keySplines="0,1,0,1;.53,0,.61,.73"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="16.50"
|
||||
cy="4.21"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`secondShrinkingDot_${id}`}
|
||||
begin={`firstShrinkingDot_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keyTimes="0;.2;1"
|
||||
keySplines="0,1,0,1;.53,0,.61,.73"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="7.50"
|
||||
cy="4.21"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`thirdShrinkingDot_${id}`}
|
||||
begin={`fifthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keyTimes="0;.2;1"
|
||||
keySplines="0,1,0,1;.53,0,.61,.73"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="19.79"
|
||||
cy="7.50"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`fourthShrinkingDot_${id}`}
|
||||
begin={`secondShrinkingDot_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keyTimes="0;.2;1"
|
||||
keySplines="0,1,0,1;.53,0,.61,.73" fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="4.21"
|
||||
cy="7.50"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`fifthShrinkingDot_${id}`}
|
||||
begin={`seventhShrinkingDot_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keyTimes="0;.2;1"
|
||||
keySplines="0,1,0,1;.53,0,.61,.73"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="21.00"
|
||||
cy="12.00"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`sixthShrinkingDot_${id}`}
|
||||
begin={`fourthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keyTimes="0;.2;1"
|
||||
keySplines="0,1,0,1;.53,0,.61,.73"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="3.00"
|
||||
cy="12.00"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`seventhShrinkingDot_${id}`}
|
||||
begin={`ninthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keyTimes="0;.2;1"
|
||||
keySplines="0,1,0,1;.53,0,.61,.73"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="19.79"
|
||||
cy="16.50"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`eighthShrinkingDot_${id}`}
|
||||
begin={`sixthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keyTimes="0;.2;1"
|
||||
keySplines="0,1,0,1;.53,0,.61,.73"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="4.21"
|
||||
cy="16.50"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`ninthShrinkingDot_${id}`}
|
||||
begin={`eleventhShrinkingDot_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keyTimes="0;.2;1"
|
||||
keySplines="0,1,0,1;.53,0,.61,.73"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="16.50"
|
||||
cy="19.79"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`tenthShrinkingDot_${id}`}
|
||||
begin={`eighthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keyTimes="0;.2;1"
|
||||
keySplines="0,1,0,1;.53,0,.61,.73"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="7.50"
|
||||
cy="19.79"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`eleventhShrinkingDot_${id}`}
|
||||
begin={`twelfthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keyTimes="0;.2;1"
|
||||
keySplines="0,1,0,1;.53,0,.61,.73"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="21"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`twelfthShrinkingDot_${id}`}
|
||||
begin={`tenthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;2;0"
|
||||
keyTimes="0;.2;1"
|
||||
keySplines="0,1,0,1;.53,0,.61,.73"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
46
lib/component/loading/dot/CircleSpinningDot.tsx
Normal file
46
lib/component/loading/dot/CircleSpinningDot.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { CircleSpinningDotProps } from "$/types/Loading";
|
||||
|
||||
export default function CircleSpinningDot({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.75,
|
||||
stroke,
|
||||
fill,
|
||||
trackClassName = "fill-transparent",
|
||||
trackStroke,
|
||||
trackFill
|
||||
}: CircleSpinningDotProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/dot-revolve.svg
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
|
||||
className={trackClassName}
|
||||
stroke={trackStroke}
|
||||
fill={trackFill}
|
||||
/>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="2.5"
|
||||
r="1.5"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
dur={animationDuration}
|
||||
values="0 12 12;360 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
240
lib/component/loading/dot/CyclingDots.tsx
Normal file
240
lib/component/loading/dot/CyclingDots.tsx
Normal file
@@ -0,0 +1,240 @@
|
||||
import type { LoadingDotsProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function CyclingDots({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.5,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingDotsProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-move.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="4"
|
||||
cy="12"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin="0;spinner_z0Or.end"
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1"
|
||||
values="0;3"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin="spinner_OLMs.end"
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1"
|
||||
values="4;12"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin="spinner_UHR2.end"
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1"
|
||||
values="12;20"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`firstDotFourthAnimate_${id}`}
|
||||
begin="spinner_Aguh.end"
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1"
|
||||
values="3;0"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id="spinner_z0Or"
|
||||
begin={`firstDotFourthAnimate_${id}.end`}
|
||||
attributeName="cx"
|
||||
dur="0.001s"
|
||||
values="20;4"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="4"
|
||||
cy="12"
|
||||
r="3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin="0;spinner_z0Or.end"
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1"
|
||||
values="4;12"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin="spinner_OLMs.end"
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1"
|
||||
values="12;20"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`secondDotThirdAnimate_${id}`}
|
||||
begin="spinner_UHR2.end"
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1"
|
||||
values="3;0"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id="spinner_Aguh"
|
||||
begin={`secondDotThirdAnimate_${id}.end`}
|
||||
attributeName="cx"
|
||||
dur="0.001s"
|
||||
values="20;4"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin="spinner_Aguh.end"
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1"
|
||||
values="0;3"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin="0;spinner_z0Or.end"
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1"
|
||||
values="12;20"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`thirdDotSecondAnimate_${id}`}
|
||||
begin="spinner_OLMs.end"
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1"
|
||||
values="3;0"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id="spinner_UHR2"
|
||||
begin={`thirdDotSecondAnimate_${id}.end`}
|
||||
attributeName="cx"
|
||||
dur="0.001s"
|
||||
values="20;4"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin="spinner_UHR2.end"
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1"
|
||||
values="0;3"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin="spinner_Aguh.end"
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1"
|
||||
values="4;12"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="20"
|
||||
cy="12"
|
||||
r="3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`fourthDotFirstAnimate_${id}`}
|
||||
begin="0;spinner_z0Or.end"
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1"
|
||||
values="3;0"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id="spinner_OLMs"
|
||||
begin={`fourthDotFirstAnimate_${id}.end`}
|
||||
attributeName="cx"
|
||||
dur="0.001s"
|
||||
values="20;4"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin="spinner_OLMs.end"
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1"
|
||||
values="0;3"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin="spinner_UHR2.end"
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1"
|
||||
values="4;12"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin="spinner_Aguh.end"
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1"
|
||||
values="12;20"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
79
lib/component/loading/dot/FadingDots.tsx
Normal file
79
lib/component/loading/dot/FadingDots.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import type { LoadingDotsProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function FadingDots({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.75,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingDotsProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-fade.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="4"
|
||||
cy="12"
|
||||
r="3"
|
||||
opacity="1"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`firstFadingDots_${id}`}
|
||||
begin={`0;lastFadingDots_${id}.end-${animationDuration / 3}s`}
|
||||
attributeName="opacity"
|
||||
dur={animationDuration}
|
||||
values="1;.2"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="3"
|
||||
opacity=".4"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`secondFadingDots_${id}`}
|
||||
begin={`firstFadingDots_${id}.begin+${animationDuration / 5}s`}
|
||||
attributeName="opacity"
|
||||
dur={animationDuration}
|
||||
values="1;.2"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="20"
|
||||
cy="12"
|
||||
r="3"
|
||||
opacity=".3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`lastFadingDots_${id}`}
|
||||
begin={`secondFadingDots_${id}.begin+${animationDuration / 5}s`}
|
||||
attributeName="opacity"
|
||||
dur={animationDuration}
|
||||
values="1;.2"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
67
lib/component/loading/dot/PulsingDots.tsx
Normal file
67
lib/component/loading/dot/PulsingDots.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import type { LoadingDotsProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function PulsingDots({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.75,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingDotsProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-scale-middle.svg
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="4"
|
||||
cy="12"
|
||||
r="1.5"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
dur={animationDuration}
|
||||
values="1.5;3;1.5"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
dur={animationDuration}
|
||||
values="3;1.5;3"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="20"
|
||||
cy="12"
|
||||
r="1.5"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
dur={animationDuration}
|
||||
values="1.5;3;1.5"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
56
lib/component/loading/dot/RotatingDots.tsx
Normal file
56
lib/component/loading/dot/RotatingDots.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import type { LoadingDotsProps } from "$/types/Loading";
|
||||
|
||||
export default function RotatingDots({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 1,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingDotsProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-rotate.svg
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<g>
|
||||
<circle
|
||||
cx="4"
|
||||
cy="12"
|
||||
r="3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<circle
|
||||
cx="20"
|
||||
cy="12"
|
||||
r="3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
keySplines=".36,.6,.31,1;.36,.6,.31,1"
|
||||
values="0 12 12;180 12 12;360 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
72
lib/component/loading/dot/SwellingDots.tsx
Normal file
72
lib/component/loading/dot/SwellingDots.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import type { LoadingDotsProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function SwellingDots({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.75,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingDotsProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-scale.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="4"
|
||||
cy="12"
|
||||
r="3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`firstDot_${id}`}
|
||||
begin={`0;lastDot_${id}.end-${animationDuration / 3}s`}
|
||||
attributeName="r"
|
||||
dur={animationDuration}
|
||||
values="3;.2;3"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
begin={`firstDot_${id}.end-${animationDuration * 4 / 5}s`}
|
||||
attributeName="r"
|
||||
dur={animationDuration}
|
||||
values="3;.2;3"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="20"
|
||||
cy="12"
|
||||
r="3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`lastDot_${id}`}
|
||||
begin={`firstDot_${id}.end-${animationDuration * 2 / 3}s`}
|
||||
attributeName="r"
|
||||
dur={animationDuration}
|
||||
values="3;.2;3"
|
||||
/>
|
||||
</circle>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
81
lib/component/loading/drop/DoubleDrop.tsx
Normal file
81
lib/component/loading/drop/DoubleDrop.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import type { LoadingPulseProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function DoubleDrop({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 1.2,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingPulseProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-2.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`drop1_${id}`}
|
||||
begin={`0;drop2_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;11"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`0;drop2_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`drop2_${id}`}
|
||||
begin={`drop1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;11"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`drop1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
97
lib/component/loading/drop/DoubleWaveDrop.tsx
Normal file
97
lib/component/loading/drop/DoubleWaveDrop.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import type { LoadingPulseProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function DoubleWaveDrop({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 1.2,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingPulseProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-rings-2.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
|
||||
transform="translate(12, 12) scale(0)"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
id={`drop1_${id}`}
|
||||
begin={`0;drop2_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
type="translate"
|
||||
dur={animationDuration}
|
||||
values="12 12;0 0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
<animateTransform
|
||||
begin={`0;drop2_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
additive="sum"
|
||||
type="scale"
|
||||
dur={animationDuration}
|
||||
values="0;1"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
<animate
|
||||
begin={`0;drop2_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
</path>
|
||||
<path
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
|
||||
transform="translate(12, 12) scale(0)"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
id={`drop2_${id}`}
|
||||
begin={`drop1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
type="translate"
|
||||
dur={animationDuration}
|
||||
values="12 12;0 0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
<animateTransform
|
||||
begin={`drop1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
additive="sum"
|
||||
type="scale"
|
||||
dur={animationDuration}
|
||||
values="0;1"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
<animate
|
||||
begin={`drop1_${id}.begin+${animationDuration / 2}s`}
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
</path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
49
lib/component/loading/drop/Drop.tsx
Normal file
49
lib/component/loading/drop/Drop.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import type { LoadingPulseProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function Drop({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 1.2,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingPulseProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse.svg
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;11"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
109
lib/component/loading/drop/QuickDrop.tsx
Normal file
109
lib/component/loading/drop/QuickDrop.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import type { LoadingPulseProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function QuickDrop({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 1.2,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingPulseProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-multiple.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`drop1_${id}`}
|
||||
begin={`0;drop3_${id}.end`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;11"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`0;drop3_${id}.end`}
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`drop2_${id}`}
|
||||
begin={`drop1_${id}.begin+${animationDuration / 6}`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;11"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`drop1_${id}.begin+${animationDuration / 6}`}
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`drop3_${id}`}
|
||||
begin={`drop1_${id}.begin+${animationDuration / 3}`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;11"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`drop1_${id}.begin+${animationDuration / 3}`}
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
133
lib/component/loading/drop/QuickWaveDrop.tsx
Normal file
133
lib/component/loading/drop/QuickWaveDrop.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
import type { LoadingPulseProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function QuickWaveDrop({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 1.2,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingPulseProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-rings-multiple.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
|
||||
transform="translate(12, 12) scale(0)"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
id={`drop1_${id}`}
|
||||
begin={`0;drop3_${id}.end`}
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
type="translate"
|
||||
dur={animationDuration}
|
||||
values="12 12;0 0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
<animateTransform
|
||||
begin={`0;drop3_${id}.end`}
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
additive="sum"
|
||||
type="scale"
|
||||
dur={animationDuration}
|
||||
values="0;1"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
<animate
|
||||
begin={`0;drop3_${id}.end`}
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
</path>
|
||||
<path
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
|
||||
transform="translate(12, 12) scale(0)"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
id={`drop2_${id}`}
|
||||
begin={`drop1_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
type="translate"
|
||||
dur={animationDuration}
|
||||
values="12 12;0 0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
<animateTransform
|
||||
begin={`drop1_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
additive="sum"
|
||||
type="scale"
|
||||
dur={animationDuration}
|
||||
values="0;1"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
<animate
|
||||
begin={`drop1_${id}.begin+${animationDuration / 6}s`}
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
</path>
|
||||
<path
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
|
||||
transform="translate(12, 12) scale(0)"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
id={`drop3_${id}`}
|
||||
begin={`drop1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
type="translate"
|
||||
dur={animationDuration}
|
||||
values="12 12;0 0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
<animateTransform
|
||||
begin={`drop1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
additive="sum"
|
||||
type="scale"
|
||||
dur={animationDuration}
|
||||
values="0;1"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
<animate
|
||||
begin={`drop1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
</path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
109
lib/component/loading/drop/TripleDrop.tsx
Normal file
109
lib/component/loading/drop/TripleDrop.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import type { LoadingPulseProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function TripleDrop({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 1.2,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingPulseProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-3.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`drop1_${id}`}
|
||||
begin={`0;drop3_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;11"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`0;drop3_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`drop2_${id}`}
|
||||
begin={`drop1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;11"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`drop1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`drop3_${id}`}
|
||||
begin={`drop1_${id}.begin+${animationDuration * 2 / 3}s`}
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="0;11"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`drop1_${id}.begin+${animationDuration * 2 / 3}s`}
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
133
lib/component/loading/drop/TripleWaveDrop.tsx
Normal file
133
lib/component/loading/drop/TripleWaveDrop.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
import type { LoadingPulseProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function TripleWaveDrop({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 1.2,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingPulseProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-rings-3.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
|
||||
transform="translate(12, 12) scale(0)"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
id={`drop1_${id}`}
|
||||
begin={`0;drop3_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
type="translate"
|
||||
dur={animationDuration}
|
||||
values="12 12;0 0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
<animateTransform
|
||||
begin={`0;drop3_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
additive="sum"
|
||||
type="scale"
|
||||
dur={animationDuration}
|
||||
values="0;1"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
<animate
|
||||
begin={`0;drop3_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
</path>
|
||||
<path
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
|
||||
transform="translate(12, 12) scale(0)"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
id={`drop2_${id}`}
|
||||
begin={`drop1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
type="translate"
|
||||
dur={animationDuration}
|
||||
values="12 12;0 0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
<animateTransform
|
||||
begin={`drop1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
additive="sum"
|
||||
type="scale"
|
||||
dur={animationDuration}
|
||||
values="0;1"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
<animate
|
||||
begin={`drop1_${id}.begin+${animationDuration / 3}s`}
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
</path>
|
||||
<path
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
|
||||
transform="translate(12, 12) scale(0)"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
id={`drop3_${id}`}
|
||||
begin={`drop1_${id}.begin+${animationDuration * 2 / 3}s`}
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
type="translate"
|
||||
dur={animationDuration}
|
||||
values="12 12;0 0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
<animateTransform
|
||||
begin={`drop1_${id}.begin+${animationDuration * 2 / 3}s`}
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
additive="sum"
|
||||
type="scale"
|
||||
dur={animationDuration}
|
||||
values="0;1"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
<animate
|
||||
begin={`drop1_${id}.begin+${animationDuration * 2 / 3}s`}
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
/>
|
||||
</path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
59
lib/component/loading/drop/WaveDrop.tsx
Normal file
59
lib/component/loading/drop/WaveDrop.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import type { LoadingPulseProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function WaveDrop({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 1.2,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingPulseProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-ring.svg
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
|
||||
transform="translate(12, 12) scale(0)"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
type="translate"
|
||||
dur={animationDuration}
|
||||
values="12 12;0 0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
calcMode="spline"
|
||||
additive="sum"
|
||||
type="scale"
|
||||
dur={animationDuration}
|
||||
values="0;1"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="1;0"
|
||||
keySplines=".52,.6,.25,.99"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
45
lib/component/loading/spinner/HalfSpinner.tsx
Normal file
45
lib/component/loading/spinner/HalfSpinner.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import type { LoadingSpinnerProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function HalfSpinner({
|
||||
width,
|
||||
height,
|
||||
animationDuration = 1,
|
||||
className,
|
||||
stroke,
|
||||
fill,
|
||||
trackClassName = "fill-transparent",
|
||||
trackStroke,
|
||||
trackFill
|
||||
}: LoadingSpinnerProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/180-ring-with-bg.svg
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
|
||||
className={trackClassName}
|
||||
stroke={trackStroke}
|
||||
fill={trackFill}
|
||||
/>
|
||||
<path
|
||||
d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
dur={animationDuration}
|
||||
values="0 12 12;360 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
45
lib/component/loading/spinner/QuarterSpinner.tsx
Normal file
45
lib/component/loading/spinner/QuarterSpinner.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import type { LoadingSpinnerProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function QuarterSpinner({
|
||||
width,
|
||||
height,
|
||||
animationDuration = 1,
|
||||
className,
|
||||
stroke,
|
||||
fill,
|
||||
trackClassName = "fill-transparent",
|
||||
trackStroke,
|
||||
trackFill
|
||||
}: LoadingSpinnerProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/90-ring-with-bg.svg
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
|
||||
className={trackClassName}
|
||||
stroke={trackStroke}
|
||||
fill={trackFill}
|
||||
/>
|
||||
<path
|
||||
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
dur={animationDuration}
|
||||
values="0 12 12;360 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
70
lib/component/loading/spinner/RubberSpinner.tsx
Normal file
70
lib/component/loading/spinner/RubberSpinner.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import type { RubberLoadingSpinnerProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function RubberSpinner({
|
||||
width,
|
||||
height,
|
||||
animationDuration = 2,
|
||||
stretchDuration = 1.5,
|
||||
className,
|
||||
stroke,
|
||||
fill = "none",
|
||||
trackClassName = "fill-transparent",
|
||||
trackStroke,
|
||||
trackFill
|
||||
}: RubberLoadingSpinnerProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/ring-resize.svg
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
|
||||
className={trackClassName}
|
||||
stroke={trackStroke}
|
||||
fill={trackFill}
|
||||
/>
|
||||
<g>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="9.5"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
dur={stretchDuration}
|
||||
calcMode="spline"
|
||||
values="0 150;42 150;42 150;42 150"
|
||||
keyTimes="0;0.475;0.95;1"
|
||||
keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="stroke-dashoffset"
|
||||
dur={stretchDuration}
|
||||
calcMode="spline"
|
||||
values="0;-16;-59;-59"
|
||||
keyTimes="0;0.475;0.95;1"
|
||||
keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
dur={animationDuration}
|
||||
values="0 12 12;360 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
45
lib/component/loading/spinner/ThreeQuarterSpinner.tsx
Normal file
45
lib/component/loading/spinner/ThreeQuarterSpinner.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import type { LoadingSpinnerProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function ThreeQuarterSpinner({
|
||||
width,
|
||||
height,
|
||||
animationDuration = 1,
|
||||
className,
|
||||
stroke,
|
||||
fill,
|
||||
trackClassName = "fill-transparent",
|
||||
trackStroke,
|
||||
trackFill
|
||||
}: LoadingSpinnerProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/270-ring-with-bg.svg
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
|
||||
className={trackClassName}
|
||||
stroke={trackStroke}
|
||||
fill={trackFill}
|
||||
/>
|
||||
<path
|
||||
d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
dur={animationDuration}
|
||||
values="0 12 12;360 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
79
lib/component/loading/various/BouncingDot.tsx
Normal file
79
lib/component/loading/various/BouncingDot.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import type { LoadingVariousProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function BouncingDot({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.9,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingVariousProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bouncing-ball.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<ellipse
|
||||
cx="12"
|
||||
cy="5"
|
||||
rx="4"
|
||||
ry="4"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`dot1_1_${id}`}
|
||||
begin={`0;dot1_5_${id}.end`}
|
||||
attributeName="cy"
|
||||
calcMode="spline"
|
||||
dur={animationDuration * 5 / 12}
|
||||
values="5;20"
|
||||
keySplines=".33,0,.66,.33"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`dot1_1_${id}.end`}
|
||||
attributeName="rx"
|
||||
calcMode="spline"
|
||||
dur={animationDuration / 18}
|
||||
values="4;4.8;4"
|
||||
keySplines=".33,0,.66,.33;.33,.66,.66,1"
|
||||
/>
|
||||
<animate
|
||||
begin={`dot1_1_${id}.end`}
|
||||
attributeName="ry"
|
||||
calcMode="spline"
|
||||
dur={animationDuration / 18}
|
||||
values="4;3;4"
|
||||
keySplines=".33,0,.66,.33;.33,.66,.66,1"
|
||||
/>
|
||||
<animate
|
||||
id={`dot1_4_${id}`}
|
||||
begin={`dot1_1_${id}.end`}
|
||||
attributeName="cy"
|
||||
calcMode="spline"
|
||||
dur={animationDuration / 36}
|
||||
values="20;20.5"
|
||||
keySplines=".33,0,.66,.33"
|
||||
/>
|
||||
<animate
|
||||
id={`dot1_5_${id}`}
|
||||
begin={`dot1_4_${id}.end`}
|
||||
attributeName="cy"
|
||||
calcMode="spline"
|
||||
dur={animationDuration * 4 / 9}
|
||||
values="20.5;5"
|
||||
keySplines=".33,.66,.66,1"
|
||||
/>
|
||||
</ellipse>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
95
lib/component/loading/various/PulsingLine.tsx
Normal file
95
lib/component/loading/various/PulsingLine.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import type { LoadingVariousProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function PulsingLine({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.75,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingVariousProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/gooey-balls-1.svg
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<filter id="spinner-gF00">
|
||||
<feGaussianBlur
|
||||
in="SourceGraphic"
|
||||
stdDeviation="1.5"
|
||||
result="y"
|
||||
/>
|
||||
<feColorMatrix
|
||||
in="y"
|
||||
mode="matrix"
|
||||
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
|
||||
result="z"
|
||||
/>
|
||||
<feBlend
|
||||
in="SourceGraphic"
|
||||
in2="z"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#spinner-gF00)">
|
||||
<circle
|
||||
cx="4"
|
||||
cy="12"
|
||||
r="3"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="4;9;4"
|
||||
keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="3;8;3"
|
||||
keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="15"
|
||||
cy="12"
|
||||
r="8"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="15;20;15"
|
||||
keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="r"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="8;3;8"
|
||||
keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
91
lib/component/loading/various/SpinningBinary.tsx
Normal file
91
lib/component/loading/various/SpinningBinary.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import type { LoadingVariousProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function SpinningBinary({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 2,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingVariousProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/gooey-balls-2.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<filter
|
||||
id={`spinningBinaryFilter_${id}`}
|
||||
>
|
||||
<feGaussianBlur
|
||||
in="SourceGraphic"
|
||||
stdDeviation="1"
|
||||
result="y"
|
||||
/>
|
||||
<feColorMatrix
|
||||
in="y"
|
||||
mode="matrix"
|
||||
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
|
||||
result="z"
|
||||
/>
|
||||
<feBlend
|
||||
in="SourceGraphic"
|
||||
in2="z"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g
|
||||
filter={`url(#spinningBinaryFilter_${id})`}
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="12"
|
||||
r="4"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="5;8;5"
|
||||
keySplines=".36,.62,.43,.99;.79,0,.58,.57"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="19"
|
||||
cy="12"
|
||||
r="4"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur={animationDuration}
|
||||
values="19;16;19"
|
||||
keySplines=".36,.62,.43,.99;.79,0,.58,.57"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
dur={animationDuration * 3 / 8}
|
||||
values="0 12 12;360 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
64
lib/component/loading/various/SpinningClock.tsx
Normal file
64
lib/component/loading/various/SpinningClock.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import type { LoadingVariousProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function SpinningClock({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 9,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingVariousProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/clock.svg
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
/>
|
||||
<rect
|
||||
x="11"
|
||||
y="4"
|
||||
rx="1"
|
||||
width="2"
|
||||
height="9"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
dur={animationDuration / 12}
|
||||
values="0 12 12;360 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
x="11"
|
||||
y="11"
|
||||
rx="1"
|
||||
width="2"
|
||||
height="7"
|
||||
className={className}
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
dur={animationDuration}
|
||||
values="0 12 12;360 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</rect>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
38
lib/component/loading/various/SpinningEclipse.tsx
Normal file
38
lib/component/loading/various/SpinningEclipse.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import type { LoadingVariousProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function SpinningEclipse({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.6,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingVariousProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/eclipse.svg
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
dur={animationDuration}
|
||||
values="0 12 12;360 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
38
lib/component/loading/various/SpinningEclipseHalf.tsx
Normal file
38
lib/component/loading/various/SpinningEclipseHalf.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import type { LoadingVariousProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function SpinningEclipseHalf({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.6,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingVariousProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/eclipse-half.svg
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M2,12A10.94,10.94,0,0,1,5,4.65c-.21-.19-.42-.36-.62-.55h0A11,11,0,0,0,12,23c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
dur={animationDuration}
|
||||
values="0 12 12;360 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
38
lib/component/loading/various/SpinningGalaxy.tsx
Normal file
38
lib/component/loading/various/SpinningGalaxy.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import type { LoadingVariousProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function SpinningGalaxy({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 1.5,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingVariousProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/wind-toy.svg
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20.27,4.74a4.93,4.93,0,0,1,1.52,4.61,5.32,5.32,0,0,1-4.1,4.51,5.12,5.12,0,0,1-5.2-1.5,5.53,5.53,0,0,0,6.13-1.48A5.66,5.66,0,0,0,20.27,4.74ZM12.32,11.53a5.49,5.49,0,0,0-1.47-6.2A5.57,5.57,0,0,0,4.71,3.72,5.17,5.17,0,0,1,9.53,2.2,5.52,5.52,0,0,1,13.9,6.45,5.28,5.28,0,0,1,12.32,11.53ZM19.2,20.29a4.92,4.92,0,0,1-4.72,1.49,5.32,5.32,0,0,1-4.34-4.05A5.2,5.2,0,0,1,11.6,12.5a5.6,5.6,0,0,0,1.51,6.13A5.63,5.63,0,0,0,19.2,20.29ZM3.79,19.38A5.18,5.18,0,0,1,2.32,14a5.3,5.3,0,0,1,4.59-4,5,5,0,0,1,4.58,1.61,5.55,5.55,0,0,0-6.32,1.69A5.46,5.46,0,0,0,3.79,19.38ZM12.23,12a5.11,5.11,0,0,0,3.66-5,5.75,5.75,0,0,0-3.18-6,5,5,0,0,1,4.42,2.3,5.21,5.21,0,0,1,.24,5.92A5.4,5.4,0,0,1,12.23,12ZM11.76,12a5.18,5.18,0,0,0-3.68,5.09,5.58,5.58,0,0,0,3.19,5.79c-1,.35-2.9-.46-4-1.68A5.51,5.51,0,0,1,11.76,12ZM23,12.63a5.07,5.07,0,0,1-2.35,4.52,5.23,5.23,0,0,1-5.91.2,5.24,5.24,0,0,1-2.67-4.77,5.51,5.51,0,0,0,5.45,3.33A5.52,5.52,0,0,0,23,12.63ZM1,11.23a5,5,0,0,1,2.49-4.5,5.23,5.23,0,0,1,5.81-.06,5.3,5.3,0,0,1,2.61,4.74A5.56,5.56,0,0,0,6.56,8.06,5.71,5.71,0,0,0,1,11.23Z"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
dur={animationDuration}
|
||||
values="0 12 12;360 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
38
lib/component/loading/various/SpinningTadpole.tsx
Normal file
38
lib/component/loading/various/SpinningTadpole.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import type { LoadingVariousProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function SpinningTadpole({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.75,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingVariousProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/tadpole.svg
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12,23a9.63,9.63,0,0,1-8-9.5,9.51,9.51,0,0,1,6.79-9.1A1.66,1.66,0,0,0,12,2.81h0a1.67,1.67,0,0,0-1.94-1.64A11,11,0,0,0,12,23Z"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
dur={animationDuration}
|
||||
values="0 12 12;360 12 12"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
99
lib/component/loading/various/Wifi.tsx
Normal file
99
lib/component/loading/various/Wifi.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import type { LoadingWifiProps } from "$/types/Loading";
|
||||
|
||||
|
||||
export default function Wifi({
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
animationDuration = 0.25,
|
||||
fadeDuration = 0.001,
|
||||
stroke,
|
||||
fill
|
||||
}: LoadingWifiProps){
|
||||
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/wifi.svg
|
||||
const id = crypto.randomUUID().replaceAll("-", "");
|
||||
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12,21L15.6,16.2C14.6,15.45 13.35,15 12,15C10.65,15 9.4,15.45 8.4,16.2L12,21"
|
||||
opacity="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`segment1_1_${id}`}
|
||||
begin={`0;segment1_2_${id}.end+0.2s`}
|
||||
attributeName="opacity"
|
||||
calcMode="discrete"
|
||||
dur={animationDuration}
|
||||
values="0;1"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
id={`segment1_2_${id}`}
|
||||
begin={`segment3_1_${id}.end+0.5s`}
|
||||
attributeName="opacity"
|
||||
dur={fadeDuration}
|
||||
values="1;0"
|
||||
fill="freeze"
|
||||
/>
|
||||
</path>
|
||||
<path
|
||||
d="M12,9C9.3,9 6.81,9.89 4.8,11.4L6.6,13.8C8.1,12.67 9.97,12 12,12C14.03,12 15.9,12.67 17.4,13.8L19.2,11.4C17.19,9.89 14.7,9 12,9Z"
|
||||
opacity="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`segment2_1_${id}`}
|
||||
begin={`segment1_1_${id}.end`}
|
||||
attributeName="opacity"
|
||||
calcMode="discrete"
|
||||
dur={animationDuration}
|
||||
values="0;1"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`segment3_1_${id}.end+0.5s`}
|
||||
attributeName="opacity"
|
||||
dur={fadeDuration}
|
||||
values="1;0"
|
||||
fill="freeze"
|
||||
/>
|
||||
</path>
|
||||
<path
|
||||
d="M12,3C7.95,3 4.21,4.34 1.2,6.6L3,9C5.5,7.12 8.62,6 12,6C15.38,6 18.5,7.12 21,9L22.8,6.6C19.79,4.34 16.05,3 12,3"
|
||||
opacity="0"
|
||||
className={className}
|
||||
stroke={stroke}
|
||||
fill={fill}
|
||||
>
|
||||
<animate
|
||||
id={`segment3_1_${id}`}
|
||||
begin={`segment2_1_${id}.end`}
|
||||
attributeName="opacity"
|
||||
calcMode="discrete"
|
||||
dur={animationDuration}
|
||||
values="0;1"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
begin={`segment3_1_${id}.end+0.5s`}
|
||||
attributeName="opacity"
|
||||
dur={fadeDuration}
|
||||
values="1;0"
|
||||
fill="freeze"
|
||||
/>
|
||||
</path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
26
lib/component/message.ts
Normal file
26
lib/component/message.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import DangerMessageBlock from "./message/DangerMessageBlock";
|
||||
import DarkMessageBlock from "./message/DarkMessageBlock";
|
||||
import InfoMessageBlock from "./message/InfoMessageBlock";
|
||||
import LightMessageBlock from "./message/LightMessageBlock";
|
||||
import MessageBlock from "./message/MessageBlock";
|
||||
import MoltenMessageBlock from "./message/MoltenMessageBlock";
|
||||
import PrimaryMessageBlock from "./message/PrimaryMessagteBlock";
|
||||
import SecondaryMessageBlock from "./message/SecondaryMessageBlock";
|
||||
import SuccessMessageBlock from "./message/SuccessMessageBlock";
|
||||
import TertiaryMessageBlock from "./message/TertiaryMessageBlock";
|
||||
import WarningMessageBlock from "./message/WarningMessageBlock";
|
||||
|
||||
|
||||
export {
|
||||
DangerMessageBlock,
|
||||
DarkMessageBlock,
|
||||
InfoMessageBlock,
|
||||
LightMessageBlock,
|
||||
MessageBlock,
|
||||
MoltenMessageBlock,
|
||||
PrimaryMessageBlock,
|
||||
SecondaryMessageBlock,
|
||||
SuccessMessageBlock,
|
||||
TertiaryMessageBlock,
|
||||
WarningMessageBlock
|
||||
};
|
||||
22
lib/component/message/DangerMessageBlock.tsx
Normal file
22
lib/component/message/DangerMessageBlock.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { MessageBlockProps } from "$/types/Message";
|
||||
import clsx from "clsx";
|
||||
import MessageBlock from "./MessageBlock";
|
||||
|
||||
|
||||
export default function DangerMessageBlock(props: MessageBlockProps){
|
||||
const {
|
||||
className,
|
||||
...messageProps
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-red-200 text-red-600"
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
22
lib/component/message/DarkMessageBlock.tsx
Normal file
22
lib/component/message/DarkMessageBlock.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { MessageBlockProps } from "$/types/Message";
|
||||
import clsx from "clsx";
|
||||
import MessageBlock from "./MessageBlock";
|
||||
|
||||
|
||||
export default function DarkMessageBlock(props: MessageBlockProps){
|
||||
const {
|
||||
className,
|
||||
...messageProps
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-black text-white"
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
22
lib/component/message/InfoMessageBlock.tsx
Normal file
22
lib/component/message/InfoMessageBlock.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { MessageBlockProps } from "$/types/Message";
|
||||
import clsx from "clsx";
|
||||
import MessageBlock from "./MessageBlock";
|
||||
|
||||
|
||||
export default function InfoMessageBlock(props: MessageBlockProps){
|
||||
const {
|
||||
className,
|
||||
...messageProps
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-cyan-100 text-blue-600"
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
22
lib/component/message/LightMessageBlock.tsx
Normal file
22
lib/component/message/LightMessageBlock.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { MessageBlockProps } from "$/types/Message";
|
||||
import clsx from "clsx";
|
||||
import MessageBlock from "./MessageBlock";
|
||||
|
||||
|
||||
export default function LightMessageBlock(props: MessageBlockProps){
|
||||
const {
|
||||
className,
|
||||
...messageProps
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-white text-black"
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
36
lib/component/message/MessageBlock.tsx
Normal file
36
lib/component/message/MessageBlock.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import type { MessageBlockProps } from "$/types/Message";
|
||||
import clsx from "clsx";
|
||||
|
||||
|
||||
export default function MessageBlock(props: MessageBlockProps){
|
||||
const {
|
||||
className,
|
||||
outline = "sm",
|
||||
rounded = "lg",
|
||||
...messageProps
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
"px-4 py-2",
|
||||
{
|
||||
"border-0": outline === "none",
|
||||
"border-1": outline === "sm",
|
||||
"border-2": outline === "md",
|
||||
"border-3": outline === "lg"
|
||||
},
|
||||
{
|
||||
"rounded-none": rounded === "none",
|
||||
"rounded-xs": rounded === "xs",
|
||||
"rounded": rounded === "md",
|
||||
"rounded-lg": rounded === "lg",
|
||||
"rounded-xl": rounded === "xl"
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
22
lib/component/message/MoltenMessageBlock.tsx
Normal file
22
lib/component/message/MoltenMessageBlock.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { MessageBlockProps } from "$/types/Message";
|
||||
import clsx from "clsx";
|
||||
import MessageBlock from "./MessageBlock";
|
||||
|
||||
|
||||
export default function MoltenMessageBlock(props: MessageBlockProps){
|
||||
const {
|
||||
className,
|
||||
...messageProps
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-orange-100 text-orange-600"
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
22
lib/component/message/PrimaryMessagteBlock.tsx
Normal file
22
lib/component/message/PrimaryMessagteBlock.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { MessageBlockProps } from "$/types/Message";
|
||||
import clsx from "clsx";
|
||||
import MessageBlock from "./MessageBlock";
|
||||
|
||||
|
||||
export default function PrimaryMessageBlock(props: MessageBlockProps){
|
||||
const {
|
||||
className,
|
||||
...messageProps
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-blue-200 text-blue-600"
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
22
lib/component/message/SecondaryMessageBlock.tsx
Normal file
22
lib/component/message/SecondaryMessageBlock.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { MessageBlockProps } from "$/types/Message";
|
||||
import clsx from "clsx";
|
||||
import MessageBlock from "./MessageBlock";
|
||||
|
||||
|
||||
export default function SecondaryMessageBlock(props: MessageBlockProps){
|
||||
const {
|
||||
className,
|
||||
...messageProps
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-neutral-200 text-neutral-600"
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
22
lib/component/message/SuccessMessageBlock.tsx
Normal file
22
lib/component/message/SuccessMessageBlock.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { MessageBlockProps } from "$/types/Message";
|
||||
import clsx from "clsx";
|
||||
import MessageBlock from "./MessageBlock";
|
||||
|
||||
|
||||
export default function SuccessMessageBlock(props: MessageBlockProps){
|
||||
const {
|
||||
className,
|
||||
...messageProps
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-green-100 text-green-600"
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
23
lib/component/message/TertiaryMessageBlock.tsx
Normal file
23
lib/component/message/TertiaryMessageBlock.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import type { MessageBlockProps } from "$/types/Message";
|
||||
import clsx from "clsx";
|
||||
import MessageBlock from "./MessageBlock";
|
||||
|
||||
|
||||
export default function TertiaryMessageBlock(props: MessageBlockProps){
|
||||
const {
|
||||
className,
|
||||
...messageProps
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-purple-200 text-purple-600"
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
22
lib/component/message/WarningMessageBlock.tsx
Normal file
22
lib/component/message/WarningMessageBlock.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { MessageBlockProps } from "$/types/Message";
|
||||
import clsx from "clsx";
|
||||
import MessageBlock from "./MessageBlock";
|
||||
|
||||
|
||||
export default function WarningMessageBlock(props: MessageBlockProps){
|
||||
const {
|
||||
className,
|
||||
...messageProps
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-yellow-100 text-yellow-600"
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
13
lib/component/modal.ts
Normal file
13
lib/component/modal.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import Modal from "./modal/Modal";
|
||||
import ModalBody from "./modal/ModalBody";
|
||||
import ModalFooter from "./modal/ModalFooter";
|
||||
import ModalHeader from "./modal/ModalHeader";
|
||||
|
||||
|
||||
export {
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
ModalHeader
|
||||
};
|
||||
|
||||
71
lib/component/modal/Modal.tsx
Normal file
71
lib/component/modal/Modal.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import type { ModalProps } from "$/types/Modal";
|
||||
import { Dialog, DialogBackdrop, DialogPanel } from "@headlessui/react";
|
||||
import clsx from "clsx";
|
||||
|
||||
|
||||
export default function Modal(props: ModalProps){
|
||||
const {
|
||||
display,
|
||||
onClose,
|
||||
className,
|
||||
backgroundType = "blur",
|
||||
top,
|
||||
children
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={display}
|
||||
onClose={onClose}
|
||||
>
|
||||
{/* Backdrop as fixed sibling to the panel */}
|
||||
{
|
||||
backgroundType !== "none" &&
|
||||
<DialogBackdrop
|
||||
className={clsx(
|
||||
"fixed inset-0",
|
||||
{
|
||||
"bg-black/25": backgroundType === "darken",
|
||||
"bg-white/25": backgroundType === "lighten",
|
||||
"backdrop-blur-sm bg-radial-[circle] from-transparent to-black/25": backgroundType === "darken-blur-radial",
|
||||
"backdrop-blur-sm bg-radial-[circle] from-transparent to-white/25": backgroundType === "lighten-blur-radial",
|
||||
"backdrop-blur-sm bg-black/25": backgroundType === "darken-blur",
|
||||
"backdrop-blur-sm bg-white/25": backgroundType === "lighten-blur",
|
||||
"bg-transparent": backgroundType === "transparent",
|
||||
"backdrop-blur-sm": backgroundType === "blur"
|
||||
}
|
||||
)}
|
||||
/>
|
||||
}
|
||||
|
||||
{/* Full-screen container to center the panel */}
|
||||
<div
|
||||
className={clsx(
|
||||
"fixed top-0 left-0 h-full w-full",
|
||||
"flex flex-col items-center justify-start",
|
||||
{
|
||||
"pt-16": top
|
||||
}
|
||||
)}
|
||||
>
|
||||
{/* The actual modal panel */}
|
||||
<DialogPanel
|
||||
className={clsx(
|
||||
"relative max-w-full max-h-full rounded-lg",
|
||||
"flex flex-col items-center justify-start",
|
||||
"shadow-lg shadow-black/40",
|
||||
className,
|
||||
{
|
||||
"top-1/2 -translate-y-1/2": !top,
|
||||
"top-0": top
|
||||
}
|
||||
)}
|
||||
>
|
||||
{/* Content of the modal */}
|
||||
{children}
|
||||
</DialogPanel>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
22
lib/component/modal/ModalBody.tsx
Normal file
22
lib/component/modal/ModalBody.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { ModalBodyProps } from "$/types/Modal";
|
||||
import clsx from "clsx";
|
||||
|
||||
|
||||
export default function ModalBody(props: ModalBodyProps){
|
||||
const {
|
||||
className,
|
||||
children
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"flex flex-col items-center justify-start h-full w-full overflow-scroll",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
26
lib/component/modal/ModalFooter.tsx
Normal file
26
lib/component/modal/ModalFooter.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import type { ModalFooterProps } from "$/types/Modal";
|
||||
import clsx from "clsx";
|
||||
|
||||
|
||||
export default function ModalFooter(props: ModalFooterProps){
|
||||
const {
|
||||
className,
|
||||
children
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"flex flex-row items-center justify-center w-full rounded-b-lg",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="flex flex-row items-center justify-center mx-8 my-3"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
41
lib/component/modal/ModalHeader.tsx
Normal file
41
lib/component/modal/ModalHeader.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import type { ModalHeaderProps } from "$/types/Modal";
|
||||
import { DialogTitle } from "@headlessui/react";
|
||||
import clsx from "clsx";
|
||||
import { BsXLg } from "react-icons/bs";
|
||||
|
||||
|
||||
export default function ModalHeader(props: ModalHeaderProps){
|
||||
const {
|
||||
onClose,
|
||||
className,
|
||||
children
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"flex flex-row items-center justify-center w-full rounded-t-lg",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<DialogTitle
|
||||
as="div"
|
||||
className="flex flex-row items-center justify-center mx-8 my-3"
|
||||
>
|
||||
{children}
|
||||
</DialogTitle>
|
||||
{
|
||||
onClose &&
|
||||
<div
|
||||
className="absolute top-1 right-1 cursor-pointer"
|
||||
onClick={onClose}
|
||||
>
|
||||
<BsXLg
|
||||
size={20}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
lib/component/nav.ts
Normal file
10
lib/component/nav.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import DarkModeSwitch from "./nav/DarkModeSwitch";
|
||||
import NavBar from "./nav/NavBar";
|
||||
import PopoverMenu from "./nav/PopoverMenu";
|
||||
|
||||
|
||||
export {
|
||||
DarkModeSwitch,
|
||||
NavBar,
|
||||
PopoverMenu
|
||||
};
|
||||
46
lib/component/nav/DarkModeSwitch.tsx
Normal file
46
lib/component/nav/DarkModeSwitch.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { useTheme } from "$/providers/theme/ThemeProvider";
|
||||
import { BsLightbulb, BsLightbulbFill } from "react-icons/bs";
|
||||
|
||||
|
||||
export default function DarkModeSwitch(){
|
||||
const { theme, setTheme } = useTheme();
|
||||
|
||||
|
||||
const updateTheme = () => {
|
||||
if(theme === "system"){
|
||||
if(window.document.documentElement.classList.contains("dark")){
|
||||
setTheme("light");
|
||||
}
|
||||
else{
|
||||
setTheme("dark");
|
||||
}
|
||||
}
|
||||
else{
|
||||
setTheme(theme === "dark" ? "light" : "dark");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<label
|
||||
className="flex flex-row justify-center items-center cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="peer hidden"
|
||||
checked={theme === "dark"}
|
||||
onChange={updateTheme}
|
||||
/>
|
||||
<div
|
||||
className="block peer-checked:hidden cursor-pointer"
|
||||
>
|
||||
<BsLightbulbFill/>
|
||||
</div>
|
||||
<div
|
||||
className="hidden peer-checked:block cursor-pointer"
|
||||
>
|
||||
<BsLightbulb/>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
23
lib/component/nav/NavBar.tsx
Normal file
23
lib/component/nav/NavBar.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import type { NavBarProps } from "$/types/Nav";
|
||||
import clsx from "clsx";
|
||||
|
||||
|
||||
export default function NavBar(props: NavBarProps){
|
||||
const {
|
||||
className,
|
||||
children
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={clsx(
|
||||
className,
|
||||
"fixed top-0 left-0 w-full z-10",
|
||||
"flex flex-row flex-nowrap items-center justify-between"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
35
lib/component/nav/PopoverMenu.tsx
Normal file
35
lib/component/nav/PopoverMenu.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import type { PopoverMenuProps } from "$/types/Nav";
|
||||
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
|
||||
import clsx from "clsx";
|
||||
import { RiArrowRightSLine } from "react-icons/ri";
|
||||
|
||||
export default function PopoverMenu(props: PopoverMenuProps){
|
||||
const {
|
||||
buttonContent,
|
||||
anchor,
|
||||
children
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverButton
|
||||
className={clsx(
|
||||
"flex flex-row flex-nowrap items-center justify-center",
|
||||
"cursor-pointer outline-none h-full"
|
||||
)}
|
||||
>
|
||||
{buttonContent} <RiArrowRightSLine strokeWidth={2} size={24}/>
|
||||
</PopoverButton>
|
||||
<PopoverPanel
|
||||
anchor={{to: anchor}}
|
||||
className={clsx(
|
||||
"flex flex-col items-start justify-center",
|
||||
"bg-(--bg-color) border border-neutral-400 outline-none mt-3"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</PopoverPanel>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
14
lib/component/tab.ts
Normal file
14
lib/component/tab.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import MattrixwvTab from "./tab/MattrixwvTab";
|
||||
import MattrixwvTabGroup from "./tab/MattrixwvTabGroup";
|
||||
import MattrixwvTabList from "./tab/MattrixwvTabList";
|
||||
import MattrixwvTabPanel from "./tab/MattrixwvTabPanel";
|
||||
import MattrixwvTabPanels from "./tab/MattrixwvTabPanels";
|
||||
|
||||
|
||||
export {
|
||||
MattrixwvTab,
|
||||
MattrixwvTabGroup,
|
||||
MattrixwvTabList,
|
||||
MattrixwvTabPanel,
|
||||
MattrixwvTabPanels
|
||||
};
|
||||
23
lib/component/tab/MattrixwvTab.tsx
Normal file
23
lib/component/tab/MattrixwvTab.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import type { MattrixwvTabProps } from "$/types/Tab";
|
||||
import { Tab } from "@headlessui/react";
|
||||
import clsx from "clsx";
|
||||
|
||||
|
||||
export default function MattrixwvTab(props: MattrixwvTabProps){
|
||||
const {
|
||||
children
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Tab
|
||||
className={clsx(
|
||||
"px-4 py-2",
|
||||
"outline-none rounded-t-lg cursor-pointer",
|
||||
"data-selected:text-blue-400 data-selected:border-b-4"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</Tab>
|
||||
);
|
||||
}
|
||||
48
lib/component/tab/MattrixwvTabGroup.tsx
Normal file
48
lib/component/tab/MattrixwvTabGroup.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import type { MattrixwvTabGroupProps } from "$/types/Tab";
|
||||
import { TabGroup } from "@headlessui/react";
|
||||
import clsx from "clsx";
|
||||
import MattrixwvTab from "./MattrixwvTab";
|
||||
import MattrixwvTabList from "./MattrixwvTabList";
|
||||
import MattrixwvTabPanel from "./MattrixwvTabPanel";
|
||||
import MattrixwvTabPanels from "./MattrixwvTabPanels";
|
||||
|
||||
|
||||
export default function MattrixwvTabGroup(props: MattrixwvTabGroupProps){
|
||||
const {
|
||||
tabs,
|
||||
className
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<TabGroup
|
||||
className={clsx(
|
||||
"flex flex-col items-center justify-center w-full h-full overflow-hidden",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<MattrixwvTabList>
|
||||
{
|
||||
tabs.map((tab, index) => (
|
||||
<MattrixwvTab
|
||||
key={index}
|
||||
>
|
||||
{tab.tab}
|
||||
</MattrixwvTab>
|
||||
))
|
||||
}
|
||||
</MattrixwvTabList>
|
||||
<MattrixwvTabPanels>
|
||||
{
|
||||
tabs.map((tab, index) => (
|
||||
<MattrixwvTabPanel
|
||||
key={index}
|
||||
>
|
||||
{tab.content}
|
||||
</MattrixwvTabPanel>
|
||||
))
|
||||
}
|
||||
</MattrixwvTabPanels>
|
||||
</TabGroup>
|
||||
);
|
||||
}
|
||||
18
lib/component/tab/MattrixwvTabList.tsx
Normal file
18
lib/component/tab/MattrixwvTabList.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import type { MattrixwvTabListProps } from "$/types/Tab";
|
||||
import { TabList } from "@headlessui/react";
|
||||
|
||||
|
||||
export default function MattrixwvTabList(props: MattrixwvTabListProps){
|
||||
const {
|
||||
children
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<TabList
|
||||
className="flex flex-row items-center justify-start w-full border-b"
|
||||
>
|
||||
{children}
|
||||
</TabList>
|
||||
);
|
||||
}
|
||||
18
lib/component/tab/MattrixwvTabPanel.tsx
Normal file
18
lib/component/tab/MattrixwvTabPanel.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import type { MattrixwvTabPanelProps } from "$/types/Tab";
|
||||
import { TabPanel } from "@headlessui/react";
|
||||
|
||||
|
||||
export default function MattrixwvTabPanel(props: MattrixwvTabPanelProps){
|
||||
const {
|
||||
children
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<TabPanel
|
||||
className="flex flex-row items-start justify-center w-full h-full"
|
||||
>
|
||||
{children}
|
||||
</TabPanel>
|
||||
);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user