✨ feat: Add Kimi and Amazon Nova (resolve #54)

lobehub · Dec 4, 2024 · 1f3ee8c · 1f3ee8c
1 parent cc6e5cd
commit 1f3ee8c
Show file tree

Hide file tree

Showing 19 changed files with 627 additions and 3 deletions.
diff --git a/src/Civitai/index.md b/src/Civitai/index.md
@@ -1,8 +1,6 @@
 ---
 nav: Components
-group:
-  title: Provider
-  order: 10
+group: Provider
 title: Civitai
 atomId: Civitai
 description: https://civitai.com

diff --git a/src/Kimi/components/Avatar.tsx b/src/Kimi/components/Avatar.tsx
@@ -0,0 +1,26 @@
+'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<IconAvatarProps, 'Icon'>;
+
+const Avatar = memo<AvatarProps>(({ background, size, ...rest }) => {
+  return (
+    <IconAvatar
+      Icon={Color}
+      aria-label={TITLE}
+      background={background || COLOR_PRIMARY}
+      color={'#fff'}
+      iconMultiple={0.65}
+      size={size}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;
diff --git a/src/Kimi/components/Color.tsx b/src/Kimi/components/Color.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 (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path
+        d="M19.738 5.776c.163-.209.306-.4.457-.585.07-.087.064-.153-.004-.244-.655-.861-.717-1.817-.34-2.787.283-.73.909-1.072 1.674-1.145.477-.045.945.004 1.379.236.57.305.902.77 1.01 1.412.086.512.07 1.012-.075 1.508-.257.878-.888 1.333-1.753 1.448-.718.096-1.446.108-2.17.157-.056.004-.113 0-.178 0z"
+        fill="#027AFF"
+      />
+      <path d="M17.962 1.844h-4.326l-3.425 7.81H5.369V1.878H1.5V22h3.87v-8.477h6.824a3.025 3.025 0 002.743-1.75V22h3.87v-8.477a3.87 3.87 0 00-3.588-3.86v-.01h-2.125a3.94 3.94 0 002.323-2.12l2.545-5.689z" />
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/Kimi/components/Combine.tsx b/src/Kimi/components/Combine.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { memo } from 'react';
+
+import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
+
+import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import Avatar from './Avatar';
+import Text from './Text';
+
+export type CombineProps = Omit<IconCombineProps, 'Icon' | 'Text'>;
+const Combine = memo<CombineProps>(({ iconProps, ...rest }) => {
+  return (
+    <IconCombine
+      Icon={Avatar}
+      Text={Text}
+      aria-label={TITLE}
+      iconProps={{ shape: 'square', ...iconProps }}
+      spaceMultiple={SPACE_MULTIPLE}
+      textMultiple={TEXT_MULTIPLE}
+      {...rest}
+    />
+  );
+});
+
+export default Combine;
diff --git a/src/Kimi/components/Mono.tsx b/src/Kimi/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 (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="M19.738 5.776c.163-.209.306-.4.457-.585.07-.087.064-.153-.004-.244-.655-.861-.717-1.817-.34-2.787.283-.73.909-1.072 1.674-1.145.477-.045.945.004 1.379.236.57.305.902.77 1.01 1.412.086.512.07 1.012-.075 1.508-.257.878-.888 1.333-1.753 1.448-.718.096-1.446.108-2.17.157-.056.004-.113 0-.178 0z" />
+      <path d="M17.962 1.844h-4.326l-3.425 7.81H5.369V1.878H1.5V22h3.87v-8.477h6.824a3.025 3.025 0 002.743-1.75V22h3.87v-8.477a3.87 3.87 0 00-3.588-3.86v-.01h-2.125a3.94 3.94 0 002.323-2.12l2.545-5.689z" />
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/Kimi/components/Text.tsx b/src/Kimi/components/Text.tsx
@@ -0,0 +1,30 @@
+'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 (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 55 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path
+        clipRule="evenodd"
+        d="M13.998 2h4.277L15.76 7.645a3.9 3.9 0 01-2.297 2.104h2.1v.01a3.834 3.834 0 013.548 3.83V22h-3.825V11.852a2.99 2.99 0 01-2.713 1.736H5.825V22H2V2.035h3.825v7.714h4.787L13.998 2zM25.93 2h-3.815v20h3.815V2zm23.468 0h3.815v20h-3.815V2zM28.936 22V2h3.855l4.888 7.828L42.557 2h3.836v20h-3.815V9.183l-4.896 7.855-4.93-7.898V22h-3.816z"
+      />
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/Kimi/index.md b/src/Kimi/index.md
@@ -0,0 +1,74 @@
+---
+nav: Components
+group:
+  title: Application
+  order: 10
+title: Kimi
+atomId: Kimi
+description: https://kimi.moonshot.cn
+---
+
+## Icons
+
+```tsx
+import { Kimi } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Kimi size={64} />
+    <Kimi.Color size={64} />
+  </Flexbox>
+);
+```
+
+## Text
+
+```tsx
+import { Kimi } from '@lobehub/icons';
+
+export default () => <Kimi.Text size={48} />;
+```
+
+## Combine
+
+```tsx
+import { Kimi } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} align={'flex-start'}>
+    <Kimi.Combine size={64} />
+    <Kimi.Combine size={64} type={'color'} />
+  </Flexbox>
+);
+```
+
+## Avatars
+
+```tsx
+import { Kimi } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Kimi.Avatar size={64} />
+    <Kimi.Avatar size={64} shape={'square'} />
+  </Flexbox>
+);
+```
+
+## Colors
+
+```tsx
+import { Kimi } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+import ColorPreview from '../components/ColorPreview';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <ColorPreview color={Kimi.colorPrimary} />
+  </Flexbox>
+);
+```
diff --git a/src/Kimi/index.ts b/src/Kimi/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/Kimi/style.ts b/src/Kimi/style.ts
@@ -0,0 +1,4 @@
+export const TITLE = 'Kimi';
+export const TEXT_MULTIPLE = 0.7;
+export const SPACE_MULTIPLE = 0.25;
+export const COLOR_PRIMARY = '#000';
diff --git a/src/Nova/components/Avatar.tsx b/src/Nova/components/Avatar.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { memo } from 'react';
+
+import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
+
+import { COLOR_GRADIENT, TITLE } from '../style';
+import Mono from './Mono';
+
+export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
+
+const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+  return (
+    <IconAvatar
+      Icon={Mono}
+      aria-label={TITLE}
+      background={background || COLOR_GRADIENT}
+      color={'#fff'}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;
diff --git a/src/Nova/components/Color.tsx b/src/Nova/components/Color.tsx
@@ -0,0 +1,107 @@
+'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, c, d] = useFillIds(TITLE, 4);
+  return (
+    <svg
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path
+        d="M12.557 2.257a.432.432 0 00-.202-.366L9.42.063a.42.42 0 00-.444 0L3.601 3.395l-.022.015a.43.43 0 00-.18.352v3.443L.709 8.8a.43.43 0 00-.209.37v5.618a.43.43 0 00.214.343l2.685 1.56v3.512a.43.43 0 00.201.367l5.374 3.366a.42.42 0 00.442.002l2.935-1.79a.43.43 0 00.205-.369v-8.688h-.849v1.138L6.08 17.65l.436.737 5.191-3.156v6.305L9.2 23.066l-2.092-1.31 2.2-1.326-.434-.74-2.58 1.556-2.047-1.282v-3.406l2.374-1.43-.433-.739-2.476 1.493-2.363-1.373v-2.265l2.585-1.56-.434-.738-2.151 1.297V9.415l2.465-1.462 2.342 1.512v2.171l-1.75 1.15.461.72 1.67-1.095 1.533 1.088.486-.705-1.55-1.1v-2.27L9.56 7.817a.433.433 0 00.2-.366V4.728h-.848v2.483L6.55 8.7 4.247 7.216V4.003L6.12 2.84v2.712h.85V2.315L9.197.934l2.509 1.563v8.14h.85v-8.38z"
+        fill={a.fill}
+      />
+      <path
+        clipRule="evenodd"
+        d="M18.946 12.273a2.25 2.25 0 100-.818h-8.219v.818h8.22zm3.645-.41a1.432 1.432 0 11-2.863 0 1.432 1.432 0 012.863 0z"
+        fill={b.fill}
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="M18.091 14.727h-4.705v-.818h5.523V18h1.637v4.091h-4.091v-4.09h1.636v-3.274zm-.818 6.546v-2.455h2.454v2.455h-2.454z"
+        fill={c.fill}
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="M18.091 9h-4.705v.818h5.523v-4.09h2.375L18.5 1.273l-2.783 4.453h2.374V9zm.41-6.183L17.192 4.91h2.615L18.5 2.817z"
+        fill={d.fill}
+        fillRule="evenodd"
+      />
+      <defs>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id={a.id}
+          x1="3.5"
+          x2="20.5"
+          y1="3.5"
+          y2="21.5"
+        >
+          <stop stopColor="#43E3E4" />
+          <stop offset=".25" stopColor="#4A9FFF" />
+          <stop offset=".5" stopColor="#AA4BFB" />
+          <stop offset=".75" stopColor="#FC5978" />
+          <stop offset="1" stopColor="#FF6D32" />
+        </linearGradient>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id={b.id}
+          x1="3.5"
+          x2="20.5"
+          y1="3.5"
+          y2="21.5"
+        >
+          <stop stopColor="#43E3E4" />
+          <stop offset=".25" stopColor="#4A9FFF" />
+          <stop offset=".5" stopColor="#AA4BFB" />
+          <stop offset=".75" stopColor="#FC5978" />
+          <stop offset="1" stopColor="#FF6D32" />
+        </linearGradient>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id={c.id}
+          x1="3.5"
+          x2="20.5"
+          y1="3.5"
+          y2="21.5"
+        >
+          <stop stopColor="#43E3E4" />
+          <stop offset=".25" stopColor="#4A9FFF" />
+          <stop offset=".5" stopColor="#AA4BFB" />
+          <stop offset=".75" stopColor="#FC5978" />
+          <stop offset="1" stopColor="#FF6D32" />
+        </linearGradient>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id={d.id}
+          x1="3.5"
+          x2="20.5"
+          y1="3.5"
+          y2="21.5"
+        >
+          <stop stopColor="#43E3E4" />
+          <stop offset=".25" stopColor="#4A9FFF" />
+          <stop offset=".5" stopColor="#AA4BFB" />
+          <stop offset=".75" stopColor="#FC5978" />
+          <stop offset="1" stopColor="#FF6D32" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+});
+
+export default Icon;