datasource page

web/app/components/base/dropdown/index.tsx

@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { useState } from 'react'
+import cn from '@/utils/classnames'
 import {
   RiMoreFill,
 } from '@remixicon/react'
@@ -8,6 +9,8 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import ActionButton from '@/app/components/base/action-button'
+import type { ActionButtonProps } from '@/app/components/base/action-button'
 
 export type Item = {
   value: string | number
@@ -18,14 +21,20 @@ type DropdownProps = {
   secondItems?: Item[]
   onSelect: (item: Item) => void
   renderTrigger?: (open: boolean) => React.ReactNode
+  triggerProps?: ActionButtonProps
   popupClassName?: string
+  itemClassName?: string
+  secondItemClassName?: string
 }
 const Dropdown: FC<DropdownProps> = ({
   items,
   onSelect,
   secondItems,
   renderTrigger,
+  triggerProps,
   popupClassName,
+  itemClassName,
+  secondItemClassName,
 }) => {
   const [open, setOpen] = useState(false)
 
@@ -45,14 +54,15 @@ const Dropdown: FC<DropdownProps> = ({
           renderTrigger
             ? renderTrigger(open)
             : (
-              <div
-                className={`
-                  flex h-6 w-6 cursor-pointer items-center justify-center rounded-md
-                  ${open && 'bg-divider-regular'}
-                `}
+              <ActionButton
+                {...triggerProps}
+                className={cn(
+                  open && 'bg-divider-regular',
+                  triggerProps?.className,
+                )}
               >
                 <RiMoreFill className='h-4 w-4 text-text-tertiary' />
-              </div>
+              </ActionButton>
             )
         }
       </PortalToFollowElemTrigger>
@@ -65,7 +75,10 @@ const Dropdown: FC<DropdownProps> = ({
                   items.map(item => (
                     <div
                       key={item.value}
-                      className='flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover'
+                      className={cn(
+                        'flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover',
+                        itemClassName,
+                      )}
                       onClick={() => handleSelect(item)}
                     >
                       {item.text}
@@ -87,7 +100,10 @@ const Dropdown: FC<DropdownProps> = ({
                   secondItems.map(item => (
                     <div
                       key={item.value}
-                      className='flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover'
+                      className={cn(
+                        'flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover',
+                        secondItemClassName,
+                      )}
                       onClick={() => handleSelect(item)}
                     >
                       {item.text}

web/app/components/header/account-setting/data-source-page-new/card.tsx

@@ -0,0 +1,45 @@
+import { RiAddLine } from '@remixicon/react'
+import Item from './item'
+import Button from '@/app/components/base/button'
+
+const Card = () => {
+  return (
+    <div className='rounded-xl bg-background-section-burn'>
+      <div className='flex items-center p-3 pb-2'>
+        <div className='shrinkj-0 mr-3 flex h-10 w-10 items-center justify-center'></div>
+        <div className='grow'>
+          <div className='system-md-semibold text-text-primary'>
+            Notion Data Source
+          </div>
+          <div className='system-xs-regular flex h-4 items-center text-text-tertiary'>
+            langgenius
+            <div className='text-text-quaternary'>/</div>
+            notion-data-source
+          </div>
+        </div>
+        <Button
+          variant='secondary-accent'
+        >
+          <RiAddLine className='h-4 w-4' />
+          Configure
+        </Button>
+      </div>
+      <div className='system-xs-medium flex h-4 items-center pl-3 text-text-tertiary'>
+        Connected workspace
+        <div className='ml-3 h-[1px] grow bg-divider-subtle'></div>
+      </div>
+      <div className='space-y-1 p-3 pt-2'>
+        <Item />
+        <Item />
+        <Item />
+      </div>
+      <div className='p-3 pt-1'>
+        <div className='system-xs-regular flex h-10 items-center justify-center rounded-[10px] bg-background-section text-text-tertiary'>
+          Please configure authentication
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Card

web/app/components/header/account-setting/data-source-page-new/index.tsx

@@ -0,0 +1,12 @@
+import Card from './card'
+
+const DataSourcePage = () => {
+  return (
+    <div className='space-y-2'>
+      <Card />
+      <Card />
+    </div>
+  )
+}
+
+export default DataSourcePage

web/app/components/header/account-setting/data-source-page-new/item.tsx

@@ -0,0 +1,25 @@
+import Indicator from '@/app/components/header/indicator'
+import Operator from './operator'
+
+const Item = () => {
+  return (
+    <div className='flex h-10 items-center rounded-lg bg-components-panel-on-panel-item-bg pl-3 pr-1'>
+      <div className='mr-2 h-5 w-5 shrink-0'></div>
+      <div className='system-sm-medium grow text-text-secondary'>
+        Evan’s Notion
+      </div>
+      <div className='flex shrink-0 items-center'>
+        <div className='mr-1 flex h-3 w-3 items-center justify-center'>
+          <Indicator color='green' />
+        </div>
+        <div className='system-xs-semibold-uppercase text-util-colors-green-green-600'>
+          connected
+        </div>
+      </div>
+      <div className='ml-3 mr-2 h-3 w-[1px] bg-divider-regular'></div>
+      <Operator />
+    </div>
+  )
+}
+
+export default Item

web/app/components/header/account-setting/data-source-page-new/operator.tsx

@@ -0,0 +1,73 @@
+import {
+  useCallback,
+  useMemo,
+} from 'react'
+import {
+  RiDeleteBinLine,
+  RiLoopLeftLine,
+  RiStickyNoteAddLine,
+} from '@remixicon/react'
+import Dropdown from '@/app/components/base/dropdown'
+import type { Item } from '@/app/components/base/dropdown'
+
+const Operator = () => {
+  const items = useMemo(() => {
+    return [
+      {
+        value: 'change',
+        text: (
+          <div className='flex'>
+            <RiStickyNoteAddLine className='mr-2 h-4 w-4 text-text-tertiary' />
+            <div>
+              <div className='system-sm-semibold mb-1 text-text-secondary'>Change authorized pages</div>
+              <div className='system-xs-regular text-text-tertiary'>18 Pages authorized</div>
+            </div>
+          </div>
+        ),
+      },
+      {
+        value: 'sync',
+        text: (
+          <div className='flex items-center'>
+            <RiLoopLeftLine className='mr-2 h-4 w-4 text-text-tertiary' />
+            <div className='system-sm-semibold text-text-secondary'>Sync</div>
+          </div>
+        ),
+      },
+    ]
+  }, [])
+
+  const secondItems = useMemo(() => {
+    return [
+      {
+        value: 'delete',
+        text: (
+          <div className='flex items-center'>
+            <RiDeleteBinLine className='mr-2 h-4 w-4 text-text-tertiary' />
+            <div className='system-sm-semibold text-text-secondary'>Remove</div>
+          </div>
+        ),
+      },
+    ]
+  }, [])
+
+  const handleSelect = useCallback((item: Item) => {
+    console.log('Selected item:', item)
+  }, [])
+
+  return (
+   <Dropdown
+    items={items}
+    secondItems={secondItems}
+    onSelect={handleSelect}
+    popupClassName='z-[61]'
+    triggerProps={{
+      size: 'l',
+    }}
+    itemClassName='py-2 h-auto hover:bg-state-base-hover'
+    secondItemClassName='py-2 h-auto hover:bg-state-base-hover'
+   />
+  )
+}
+
+export default Operator

web/app/components/header/account-setting/index.tsx

@@ -21,7 +21,7 @@ import Button from '../../base/button'
 import MembersPage from './members-page'
 import LanguagePage from './language-page'
 import ApiBasedExtensionPage from './api-based-extension-page'
-import DataSourcePage from './data-source-page'
+import DataSourcePage from './data-source-page-new'
 import ModelProviderPage from './model-provider-page'
 import cn from '@/utils/classnames'
 import BillingPage from '@/app/components/billing/billing-page'