From 9527910deefd15d37006cf9e60fef1ffd9e1eccd Mon Sep 17 00:00:00 2001 From: canisminor1990 Date: Fri, 29 Nov 2024 15:38:09 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20Civitai?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Civitai/components/Avatar.tsx | 25 +++++++++ src/Civitai/components/Color.tsx | 51 ++++++++++++++++++ src/Civitai/components/Combine.tsx | 31 +++++++++++ src/Civitai/components/Mono.tsx | 29 ++++++++++ src/Civitai/components/Text.tsx | 28 ++++++++++ src/Civitai/components/TextColor.tsx | 31 +++++++++++ src/Civitai/index.md | 80 ++++++++++++++++++++++++++++ src/Civitai/index.ts | 30 +++++++++++ src/Civitai/style.ts | 4 ++ src/icons.ts | 1 + src/toc.ts | 19 +++++++ 11 files changed, 329 insertions(+) create mode 100644 src/Civitai/components/Avatar.tsx create mode 100644 src/Civitai/components/Color.tsx create mode 100644 src/Civitai/components/Combine.tsx create mode 100644 src/Civitai/components/Mono.tsx create mode 100644 src/Civitai/components/Text.tsx create mode 100644 src/Civitai/components/TextColor.tsx create mode 100644 src/Civitai/index.md create mode 100644 src/Civitai/index.ts create mode 100644 src/Civitai/style.ts diff --git a/src/Civitai/components/Avatar.tsx b/src/Civitai/components/Avatar.tsx new file mode 100644 index 00000000..fa6c5468 --- /dev/null +++ b/src/Civitai/components/Avatar.tsx @@ -0,0 +1,25 @@ +'use client'; + +import { memo } from 'react'; + +import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar'; + +import { COLOR_PRIMARY, TITLE } from '../style'; +import Color from './Color'; + +export type AvatarProps = Omit; + +const Avatar = memo(({ background, size, ...rest }) => { + return ( + + ); +}); + +export default Avatar; diff --git a/src/Civitai/components/Color.tsx b/src/Civitai/components/Color.tsx new file mode 100644 index 00000000..8a423dd6 --- /dev/null +++ b/src/Civitai/components/Color.tsx @@ -0,0 +1,51 @@ +'use client'; + +import { forwardRef } from 'react'; + +import { useFillIds } from '@/hooks/useFillId'; +import type { IconType } from '@/types'; + +import { TITLE } from '../style'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + const [a, b] = useFillIds(TITLE, 2); + return ( + + {TITLE} + + + + + + + + + + + + + + + ); +}); + +export default Icon; diff --git a/src/Civitai/components/Combine.tsx b/src/Civitai/components/Combine.tsx new file mode 100644 index 00000000..2521f8e2 --- /dev/null +++ b/src/Civitai/components/Combine.tsx @@ -0,0 +1,31 @@ +'use client'; + +import { memo } from 'react'; + +import IconCombine, { type IconCombineProps } from '@/features/IconCombine'; + +import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style'; +import Color from './Color'; +import Mono from './Mono'; +import Text from './Text'; +import TextColor from './TextColor'; + +export interface CombineProps extends Omit { + type?: 'color' | 'mono'; +} +const Combine = memo(({ type = 'mono', ...rest }) => { + const Icon = type === 'color' ? Color : Mono; + + return ( + + ); +}); + +export default Combine; diff --git a/src/Civitai/components/Mono.tsx b/src/Civitai/components/Mono.tsx new file mode 100644 index 00000000..97a6f842 --- /dev/null +++ b/src/Civitai/components/Mono.tsx @@ -0,0 +1,29 @@ +'use client'; + +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +import { TITLE } from '../style'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + {TITLE} + + + + ); +}); + +export default Icon; diff --git a/src/Civitai/components/Text.tsx b/src/Civitai/components/Text.tsx new file mode 100644 index 00000000..7c7a27cc --- /dev/null +++ b/src/Civitai/components/Text.tsx @@ -0,0 +1,28 @@ +'use client'; + +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +import { TITLE } from '../style'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + {TITLE} + + + + ); +}); + +export default Icon; diff --git a/src/Civitai/components/TextColor.tsx b/src/Civitai/components/TextColor.tsx new file mode 100644 index 00000000..e1d85097 --- /dev/null +++ b/src/Civitai/components/TextColor.tsx @@ -0,0 +1,31 @@ +'use client'; + +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +import { TITLE } from '../style'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + {TITLE} + + + + ); +}); + +export default Icon; diff --git a/src/Civitai/index.md b/src/Civitai/index.md new file mode 100644 index 00000000..b325cfc5 --- /dev/null +++ b/src/Civitai/index.md @@ -0,0 +1,80 @@ +--- +nav: Components +group: + title: Provider + order: 10 +title: Civitai +atomId: Civitai +description: https://civitai.com +--- + +## Icons + +```tsx +import { Civitai } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Text + +```tsx +import { Civitai } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Combine + +```tsx +import { Civitai } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Avatars + +```tsx +import { Civitai } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Colors + +```tsx +import { Civitai } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ( + + + +); +``` diff --git a/src/Civitai/index.ts b/src/Civitai/index.ts new file mode 100644 index 00000000..eebd1255 --- /dev/null +++ b/src/Civitai/index.ts @@ -0,0 +1,30 @@ +'use client'; + +import Avatar from './components/Avatar'; +import Color from './components/Color'; +import Combine from './components/Combine'; +import Mono from './components/Mono'; +import Text from './components/Text'; +import TextColor from './components/TextColor'; +import { COLOR_PRIMARY, TITLE } from './style'; + +export type CompoundedIcon = typeof Mono & { + Avatar: typeof Avatar; + Color: typeof Color; + Combine: typeof Combine; + Text: typeof Text; + TextColor: typeof TextColor; + colorPrimary: string; + title: string; +}; + +const Icons = Mono as CompoundedIcon; +Icons.Color = Color; +Icons.Text = Text; +Icons.TextColor = TextColor; +Icons.Combine = Combine; +Icons.Avatar = Avatar; +Icons.colorPrimary = COLOR_PRIMARY; +Icons.title = TITLE; + +export default Icons; diff --git a/src/Civitai/style.ts b/src/Civitai/style.ts new file mode 100644 index 00000000..87056fe0 --- /dev/null +++ b/src/Civitai/style.ts @@ -0,0 +1,4 @@ +export const TITLE = 'Civitai'; +export const TEXT_MULTIPLE = 0.75; +export const SPACE_MULTIPLE = 0.2; +export const COLOR_PRIMARY = '#fff'; diff --git a/src/icons.ts b/src/icons.ts index b2252425..d6fdfdda 100644 --- a/src/icons.ts +++ b/src/icons.ts @@ -18,6 +18,7 @@ export { default as Bedrock, type CompoundedIcon as BedrockProps } from './Bedro export { default as Bing, type CompoundedIcon as BingProps } from './Bing'; export { default as ByteDance, type CompoundedIcon as ByteDanceProps } from './ByteDance'; export { default as ChatGLM, type CompoundedIcon as ChatGLMProps } from './ChatGLM'; +export { default as Civitai, type CompoundedIcon as CivitaiProps } from './Civitai'; export { default as Claude, type CompoundedIcon as ClaudeProps } from './Claude'; export { default as Cloudflare, type CompoundedIcon as CloudflareProps } from './Cloudflare'; export { default as CodeGeeX, type CompoundedIcon as CodeGeeXProps } from './CodeGeeX'; diff --git a/src/toc.ts b/src/toc.ts index 9e6ed3db..4beb4a39 100644 --- a/src/toc.ts +++ b/src/toc.ts @@ -406,6 +406,25 @@ const toc: IconToc[] = [ }, title: 'ChatGLM', }, + { + color: '#fff', + desc: 'https://civitai.com', + docsUrl: 'civitai', + fullTitle: 'Civitai', + group: 'provider', + id: 'Civitai', + param: { + hasAvatar: true, + hasBrand: false, + hasBrandColor: false, + hasColor: true, + hasCombine: true, + hasText: true, + hasTextCn: false, + hasTextColor: false, + }, + title: 'Civitai', + }, { color: '#D97757', desc: 'https://claude.ai',