diff --git a/src/LangChain/components/Avatar.tsx b/src/LangChain/components/Avatar.tsx new file mode 100644 index 00000000..84aefe20 --- /dev/null +++ b/src/LangChain/components/Avatar.tsx @@ -0,0 +1,18 @@ +'use client'; + +import { memo } from 'react'; + +import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar'; + +import { COLOR_PRIMARY, TITLE } from '../style'; +import Mono from './Mono'; + +export type AvatarProps = Omit; + +const Avatar = memo(({ background, ...rest }) => { + return ( + + ); +}); + +export default Avatar; diff --git a/src/LangChain/components/Color.tsx b/src/LangChain/components/Color.tsx new file mode 100644 index 00000000..7624a934 --- /dev/null +++ b/src/LangChain/components/Color.tsx @@ -0,0 +1,35 @@ +'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/LangChain/components/Combine.tsx b/src/LangChain/components/Combine.tsx new file mode 100644 index 00000000..2bf349a0 --- /dev/null +++ b/src/LangChain/components/Combine.tsx @@ -0,0 +1,30 @@ +'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'; + +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/LangChain/components/Mono.tsx b/src/LangChain/components/Mono.tsx new file mode 100644 index 00000000..39a16e5f --- /dev/null +++ b/src/LangChain/components/Mono.tsx @@ -0,0 +1,32 @@ +'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/LangChain/components/Text.tsx b/src/LangChain/components/Text.tsx new file mode 100644 index 00000000..13e5dd47 --- /dev/null +++ b/src/LangChain/components/Text.tsx @@ -0,0 +1,36 @@ +'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/LangChain/index.md b/src/LangChain/index.md new file mode 100644 index 00000000..d263d210 --- /dev/null +++ b/src/LangChain/index.md @@ -0,0 +1,72 @@ +--- +nav: Components +group: Application +title: LangChain +atomId: LangChain +description: https://langchain.com +--- + +## Icons + +```tsx +import { LangChain } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Text + +```tsx +import { LangChain } from '@lobehub/icons'; + +export default () => ; +``` + +## Combine + +```tsx +import { LangChain } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Avatars + +```tsx +import { LangChain } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Colors + +```tsx +import { LangChain } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ( + + + +); +``` diff --git a/src/LangChain/index.ts b/src/LangChain/index.ts new file mode 100644 index 00000000..51ca6fb3 --- /dev/null +++ b/src/LangChain/index.ts @@ -0,0 +1,27 @@ +'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 { COLOR_PRIMARY, TITLE } from './style'; + +export type CompoundedIcon = typeof Mono & { + Avatar: typeof Avatar; + Color: typeof Color; + Combine: typeof Combine; + Text: typeof Text; + colorPrimary: string; + title: string; +}; + +const Icons = Mono as CompoundedIcon; +Icons.Color = Color; +Icons.Text = Text; +Icons.Combine = Combine; +Icons.Avatar = Avatar; +Icons.colorPrimary = COLOR_PRIMARY; +Icons.title = TITLE; + +export default Icons; diff --git a/src/LangChain/style.ts b/src/LangChain/style.ts new file mode 100644 index 00000000..00aeca0e --- /dev/null +++ b/src/LangChain/style.ts @@ -0,0 +1,4 @@ +export const TITLE = 'LangChain'; +export const TEXT_MULTIPLE = 0.5; +export const SPACE_MULTIPLE = 0.2; +export const COLOR_PRIMARY = '#1C3C3C'; diff --git a/src/icons.ts b/src/icons.ts index 90776191..53d7db42 100644 --- a/src/icons.ts +++ b/src/icons.ts @@ -58,6 +58,7 @@ export { default as Hunyuan, type CompoundedIcon as HunyuanProps } from './Hunyu export { default as InternLM, type CompoundedIcon as InternLMProps } from './InternLM'; export { default as Kimi, type CompoundedIcon as KimiProps } from './Kimi'; export { default as Kling, type CompoundedIcon as KlingProps } from './Kling'; +export { default as LangChain, type CompoundedIcon as LangChainProps } from './LangChain'; export { default as Langfuse, type CompoundedIcon as LangfuseProps } from './Langfuse'; export { default as LLaVA, type CompoundedIcon as LLaVAProps } from './LLaVA'; export { default as LmStudio, type CompoundedIcon as LmStudioProps } from './LmStudio'; diff --git a/src/toc.ts b/src/toc.ts index 37a10ba3..d80ae679 100644 --- a/src/toc.ts +++ b/src/toc.ts @@ -1139,6 +1139,25 @@ const toc: IconToc[] = [ }, title: 'LLaVA', }, + { + color: '#1C3C3C', + desc: 'https://langchain.com', + docsUrl: 'lang-chain', + fullTitle: 'LangChain', + group: 'application', + id: 'LangChain', + param: { + hasAvatar: true, + hasBrand: false, + hasBrandColor: false, + hasColor: true, + hasCombine: true, + hasText: true, + hasTextCn: false, + hasTextColor: false, + }, + title: 'LangChain', + }, { color: '#000', desc: 'https://langfuse.com',