feat: es-hangul을 사용하는 회사, 프로젝트 들의 로고를 나열할 수 있는 컴포넌트를 만듭니다. (#100)

* es-hangul을 사용하는 회사들 나열 * remove console.log * add imweb * docs: 오타 수정 및 컴포넌트 수정, 로고도 알파값 있게 수정, 아임웹 사용자 추가 (#101) * docs: light 모드로 강제하고 오타 수정 및 컴포넌트 수정, 로고도 알파값 있게 수정 * chore: update * docs: update * docs: 다크모드 다시 만들고 아임웹도 추가 * chore: update --------- Co-authored-by: Jonghyeon Ko <[email protected]>
toss · May 24, 2024 · 8d4dad0 · 8d4dad0
1 parent 7bec39c
commit 8d4dad0
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 1 deletion.
diff --git a/docs/public/adopters/비바리퍼블리카.png b/docs/public/adopters/비바리퍼블리카.png
diff --git a/docs/public/adopters/비바리퍼블리카_darkmode.png b/docs/public/adopters/비바리퍼블리카_darkmode.png
diff --git a/docs/public/adopters/아임웹.png b/docs/public/adopters/아임웹.png
diff --git a/docs/public/adopters/아임웹_darkmode.png b/docs/public/adopters/아임웹_darkmode.png
diff --git a/docs/src/components/introduction/Adopters.tsx b/docs/src/components/introduction/Adopters.tsx
@@ -0,0 +1,40 @@
+import { useIsDarkMode } from '@/hooks/use-is-dark-mode';
+import Image from 'next/image';
+import { ComponentProps } from 'react';
+
+/**
+ * 이 곳에 적용한 조직을 추가해주세요.
+ */
+export const adopterLogoImagePropsList = [
+  {
+    src: '/adopters/비바리퍼블리카.png',
+    darkSrc: '/adopters/비바리퍼블리카_darkmode.png',
+    alt: '비바리퍼블리카',
+    height: 80,
+    width: 262.6,
+  },
+  {
+    src: '/adopters/아임웹.png',
+    darkSrc: '/adopters/아임웹_darkmode.png',
+    alt: '아임웹',
+    height: 80,
+    width: 367,
+  },
+] as const satisfies Array<
+  Pick<ComponentProps<typeof Image>, 'src' | 'alt'> &
+    Required<Pick<ComponentProps<typeof Image>, 'width' | 'height'>> & {
+      darkSrc: string;
+    }
+>;
+
+export const Adopters = () => {
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '2rem', justifyContent: 'center' }}>
+      {adopterLogoImagePropsList.map(props => (
+        <Image key={props.src} {...props} src={isDarkMode ? props.darkSrc : props.src} />
+      ))}
+    </div>
+  );
+};
diff --git a/docs/src/pages/docs/introduction.en.mdx b/docs/src/pages/docs/introduction.en.mdx
@@ -1,4 +1,5 @@
 import { Steps, Callout } from 'nextra/components';
+import { Adopters } from '@/components/introduction/Adopters';
 
 # Introduction to es-hangul
 
@@ -79,3 +80,14 @@ If you have a good idea for handling Hangul well, please let us know. [Suggest a
 </Callout>
 
 </Steps>
+
+## Who's using?
+
+<br />
+
+<Adopters />
+
+<Callout type="info">
+  Please add the logo of the organization using es-hangul. We are creating this library together. [Add user with GitHub
+  PR](https://github.com/toss/es-hangul/blob/main/docs/src/components/introduction/Adopters.tsx)
+</Callout>
diff --git a/docs/src/pages/docs/introduction.ko.mdx b/docs/src/pages/docs/introduction.ko.mdx
@@ -1,4 +1,5 @@
 import { Steps, Callout } from 'nextra/components';
+import { Adopters } from '@/components/introduction/Adopters';
 
 # es-hangul 소개
 
@@ -81,3 +82,15 @@ console.log(sentence2); // '바나나가 맛있습니다.'
 </Callout>
 
 </Steps>
+
+## 어떤 곳에서 사용하나요?
+
+<br />
+
+<Adopters />
+
+<Callout type="info">
+
+es-hangul을 사용하는 조직의 로고를 추가해주세요. 우리는 이 라이브러리를 여러분과 함께 만들어 갑니다. [GitHub PR로 사용자 추가하기](https://github.com/toss/es-hangul/blob/main/docs/src/components/introduction/Adopters.tsx)
+
+</Callout>
diff --git a/docs/theme.config.tsx b/docs/theme.config.tsx
@@ -130,7 +130,7 @@ const config: DocsThemeConfig = {
   i18n: [
     { locale: 'en', text: 'English' },
     { locale: 'ko', text: '한국어' },
-  ]
+  ],
 };
 
 export default config;