feat: add some widgets

app/components/page.tsx

@@ -1,5 +1,5 @@
 import styles from './style.module.css'
-import PowerBy from '@/components/power-by'
+import PowerBy, { PowerByFooter } from '@/components/power-by'
 import Button from '@/components/button'
 import AcademicCap from '@heroicons/react/24/solid/AcademicCapIcon'
 const Home = () => {
@@ -8,14 +8,16 @@ const Home = () => {
     <div>
       <h2>Power By</h2>
       <PowerBy />
+      <PowerByFooter appName='Dify.AI' />
     </div>
 
     <div>
       <h2>Button</h2>
-      <Button text="Blue" type='blue' className='mr-2'/>
-      <Button text="Red" type='red' className='mr-2'/>
-      <Button text="Gray" type='gray' className='mr-2'/>
-      <Button text="White" type='white' className='mr-2'/>
+      <Button text="Blue" type='blue' className='mr-2' />
+      <Button text="Red" type='red' className='mr-2' />
+      <Button text="Gray" type='gray' className='mr-2' />
+      <Button text="White" type='white' className='mr-2' />
+      <Button text="Transparent" type='transparent' className='mr-2' />
       <Button text="Blue" type='blue' className='mr-2'>
         <AcademicCap className="h-4 w-4 text-white mr-2" />
         Hello Cap

components/button/index.tsx

@@ -3,18 +3,18 @@ import cn from 'classnames'
 import styles from './style.module.css'
 interface ButtonProps {
   text: string
-  type: 'blue' | 'gray' | 'red' | 'white'
+  type: 'blue' | 'gray' | 'red' | 'white' | 'transparent'
   className?: string
   onClick?: () => void
   children?: ReactNode
 }
 
-const Button: FC<ButtonProps> = ({ 
-    text, 
-    children,
-    className,
-    type= 'blue',
-    onClick
+const Button: FC<ButtonProps> = ({
+  text,
+  children,
+  className,
+  type = 'blue',
+  onClick
 }: ButtonProps) => {
   return <button
     onClick={onClick}
@@ -25,6 +25,7 @@ const Button: FC<ButtonProps> = ({
       type === 'gray' && styles.gray,
       type === 'red' && styles.red,
       type === 'white' && styles.white,
+      type === 'transparent' && styles.transparent
     )}
   >
     {children || text}

components/button/style.module.css

@@ -1,15 +1,23 @@
 .button {
-  @apply inline-flex text-xs py-2 px-3 rounded-lg align-middle;
+  @apply inline-flex text-xs py-2 px-4 rounded-lg align-middle;
 }
+
 .button.blue {
   @apply text-white bg-blue-700 hover:bg-blue-800;
 }
+
 .button.gray {
-  @apply text-gray-700 bg-gray-200  hover:bg-gray-300;
+  @apply text-gray-500 bg-gray-200 hover:bg-gray-300;
 }
+
 .button.red {
   @apply text-white bg-red-700 hover:bg-red-800;
 }
+
 .button.white {
-  @apply text-gray-700 bg-transparent outline outline-gray-300 hover:bg-gray-300;
+  @apply text-gray-500 bg-transparent outline outline-gray-300 hover:bg-gray-300;
 }
+
+.button.transparent {
+  @apply border-solid border border-gray-200 text-gray-500 hover:bg-white hover:shadow-sm hover:border-gray-300;
+}

components/power-by/index.tsx

@@ -1,4 +1,6 @@
+import { FC } from 'react'
 import Image from 'next/image'
+import dayjs from 'dayjs'
 
 const PowerBy = () => {
   return <a className='flex items-center pr-3 space-x-3' href="https://dify.ai/" target="_blank">
@@ -12,5 +14,15 @@ const PowerBy = () => {
     />
   </a>
 }
+interface PowerByFooterProps {
+  appName: string
+}
+export const PowerByFooter: FC<PowerByFooterProps> = ({
+  appName,
+}) => {
+  return <div className='flex items-center space-x-3'>
+    <span className='uppercase text-xs text-gray-400'>© {appName} {dayjs().year()}</span>
+  </div>
+}
 
 export default PowerBy

package.json

@@ -15,6 +15,7 @@
     "@types/react-dom": "18.2.4",
     "autoprefixer": "10.4.14",
     "classnames": "^2.3.2",
+    "dayjs": "^1.11.8",
     "dify-client": "^2.0.0",
     "eslint": "8.42.0",
     "eslint-config-next": "13.4.4",

tsconfig.json

@@ -8,6 +8,7 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,

yarn.lock

@@ -624,6 +624,11 @@ damerau-levenshtein@^1.0.8:
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
+dayjs@^1.11.8:
+  version "1.11.8"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.8.tgz#4282f139c8c19dd6d0c7bd571e30c2d0ba7698ea"
+  integrity sha512-LcgxzFoWMEPO7ggRv1Y2N31hUf2R0Vj7fuy/m+Bg1K8rr+KAs1AEy4y9jd5DXe8pbHgX+srkHNS7TH6Q6ZhYeQ==
+
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"