feat: add .vscode

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "files.exclude": {
+    "**/.next": true
+  },
+  "files.associations": {
+
+  }
+}

app/components/page.tsx

@@ -1,8 +1,26 @@
 import styles from './style.module.css'
-
+import PowerBy from '@/components/power-by'
 const Home = () => {
-  return <main className="flex min-h-screen p-24">
-    <h1 className={styles.red}>Home</h1>
+  return <main className={styles.container}>
+    <h1>Components</h1>
+    <div>
+      <h2>Power By</h2>
+      <PowerBy />
+    </div>
+
+    <div>
+      <h2>Button</h2>
+    </div>
+
+    <div>
+      <h2>Input</h2>
+    </div>
+
+    <div>
+      <h2>Chat Bubble</h2>
+    </div>
+
+    <div>Select</div>
   </main>
 }
 

app/components/style.module.css

@@ -1,3 +1,3 @@
-.red {
-    color: red;
+.container {
+    @apply flex min-h-screen p-24 flex-col gap-4;
 }

components/power-by/index.tsx

@@ -0,0 +1,16 @@
+import Image from 'next/image'
+
+const PowerBy = () => {
+  return <a className='flex items-center pr-3 space-x-3' href="https://dify.ai/" target="_blank">
+    <span className='uppercase text-xs text-gray-400'>power by</span>
+    <Image
+      src="/logo.png"
+      alt="Dify.AI Logo"
+      width={48}
+      height={20}
+      priority
+    />
+  </a>
+}
+
+export default PowerBy