feat(ui): add Tabs Checkbox component, update ShareModal styles

package.json

@@ -27,12 +27,14 @@
     "@solid-primitives/scheduled": "^1.3.2",
     "@solid-primitives/scroll": "^2.0.14",
     "@unocss/reset": "^0.50.6",
+    "@zag-js/checkbox": "^0.9.2",
     "@zag-js/dialog": "^0.9.2",
     "@zag-js/menu": "^0.9.2",
     "@zag-js/select": "^0.9.2",
     "@zag-js/slider": "^0.9.2",
     "@zag-js/solid": "^0.9.2",
     "@zag-js/switch": "^0.9.2",
+    "@zag-js/tabs": "^0.9.2",
     "@zag-js/toast": "^0.9.2",
     "@zag-js/toggle": "^0.9.2",
     "@zag-js/tooltip": "^0.9.2",

src/components/ModalsLayer.tsx

@@ -3,11 +3,13 @@ import {
   showConversationSidebar,
   showEmojiPickerModal,
   showSettingsSidebar,
+  showShareModal,
 } from '@/stores/ui'
 import ConversationSidebar from './conversations/ConversationSidebar'
 import SettingsSidebar from './settings/SettingsSidebar'
 import ConversationEditModal from './conversations/ConversationEditModal'
 import EmojiPickerModal from './ui/EmojiPickerModal'
+import ShareModal from './ui/ShareModal'
 import Modal from './ui/Modal'
 
 export default () => {
@@ -33,6 +35,11 @@ export default () => {
           <EmojiPickerModal />
         </div>
       </Modal>
+      <Modal bindValue={showShareModal} direction="bottom" closeBtnClass="hidden">
+        <div class="max-h-[70vh] w-full">
+          <ShareModal />
+        </div>
+      </Modal>
     </>
   )
 }

src/components/header/ConversationMessageShareButton.tsx

@@ -1,18 +1,16 @@
 import { useStore } from '@nanostores/solid'
 import { currentConversationId } from '@/stores/conversation'
+import { showShareModal } from '@/stores/ui'
 
 export default () => {
   const $currentConversationId = useStore(currentConversationId)
 
-  const handleClearMessage = () => {
-  }
-
   return (
     <>
       {$currentConversationId() && (
         <div
           class="fcc p-2 rounded-md text-xl hv-foreground"
-          onClick={handleClearMessage}
+          onClick={() => { showShareModal.set(true) }}
         >
           <div i-carbon-export />
         </div>

src/components/ui/ShareModal.tsx

@@ -0,0 +1,36 @@
+import { useI18n } from '@/hooks'
+import { Tabs } from '../ui/base'
+import type { TabItem } from './base/Tabs'
+
+export default () => {
+  const { t } = useI18n()
+
+  const tabs: TabItem[] = [
+    {
+      value: 'context',
+      label: t('conversations.share.tabs.context'),
+      content: <div class="flex">context</div>,
+    },
+    {
+      value: 'image',
+      label: t('conversations.share.tabs.image'),
+      content: <div class="flex">image</div>,
+    },
+  ]
+
+  return (
+    <div class="w-full">
+      <div class="fi justify-between border-base b-b-1 px-6 py-4">
+        <div class="text-base">{t('conversations.share.link.title')}</div>
+        <button class="emerald-button mt-0">{t('conversations.share.link.create')}</button>
+      </div>
+      <div class="fcc flex-col space-y-2 p-6">
+        <div class="border w-full border-base fi justify-between box-border p-4 rounded-md hv-base">
+          <span class="text-xs">{t('conversations.share.messages.selected')}</span>
+          <span class="text-xs op-60">2 Messages</span>
+        </div>
+        <Tabs tabs={tabs} />
+      </div>
+    </div>
+  )
+}

src/components/ui/base/Checkbox.tsx

@@ -0,0 +1,24 @@
+import * as checkbox from '@zag-js/checkbox'
+import { normalizeProps, useMachine } from '@zag-js/solid'
+import { createMemo, createUniqueId } from 'solid-js'
+
+interface Props {
+  initValue?: boolean
+  label: string
+}
+
+export const Checkbox = (props: Props) => {
+  const [state, send] = useMachine(checkbox.machine({ id: createUniqueId(), checked: props.initValue ?? false }))
+
+  const api = createMemo(() => checkbox.connect(state, send, normalizeProps))
+
+  return (
+    <label {...api().rootProps}>
+      <span {...api().labelProps}>
+        {props.label}
+      </span>
+      <input {...api().inputProps} />
+      <div {...api().controlProps} />
+    </label>
+  )
+}

src/components/ui/base/Tabs.tsx

@@ -0,0 +1,42 @@
+import * as tabs from '@zag-js/tabs'
+import { normalizeProps, useMachine } from '@zag-js/solid'
+import { For, createMemo, createUniqueId } from 'solid-js'
+import type { JSX } from 'solid-js'
+
+export interface TabItem {
+  value: string
+  label: string
+  content: JSX.Element
+}
+
+interface Props {
+  tabs: TabItem[]
+  initValue?: string
+}
+
+export const Tabs = (props: Props) => {
+  const [state, send] = useMachine(tabs.machine({ id: createUniqueId(), value: props.initValue ?? props.tabs[0].value }))
+
+  const api = createMemo(() => tabs.connect(state, send, normalizeProps))
+
+  return (
+    <div {...api().rootProps} class="w-full text-sm font-medium text-center">
+      <div {...api().tablistProps} class="flex flex-wrap -mb-px border-b border-base">
+        <For each={props.tabs}>
+          {item => (
+            <button class={`inline-block p-4 border-b-2 border-transparent hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-300 cursor-pointer  ${api().value === item.value && '!border-emerald-600 !text-emerald-600'}`} {...api().getTriggerProps({ value: item.value })}>
+              {item.label}
+            </button>
+          )}
+        </For>
+      </div>
+      <For each={props.tabs}>
+        {item => (
+          <div class="w-full p-4 text-sm mt-4 border border-base" {...api().getContentProps({ value: item.value })}>
+            {item.content}
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}

src/components/ui/base/index.ts

@@ -5,3 +5,5 @@ export * from './Select'
 export * from './Slider'
 export * from './Tooltip'
 export * from './Toggle'
+export * from './Checkbox'
+export * from './Tabs'

src/stores/ui.ts

@@ -6,6 +6,7 @@ export const showSettingsSidebar = atom(false)
 export const showConversationEditModal = atom(false)
 export const showEmojiPickerModal = atom(false)
 export const showConfirmModal = atom(false)
+export const showShareModal = atom(false)
 
 export const isSendBoxFocus = atom(false)
 export const currentErrorMessage = atom<ErrorMessage | null>(null)

unocss.config.ts

@@ -59,6 +59,7 @@ export default defineConfig({
     'input-base': 'bg-transparent placeholder:op-50 dark:placeholder:op-20 focus:(ring-0 outline-none) resize-none',
     'button': 'mt-4 px-3 py-2 text-xs border border-base rounded-lg hv-base hover:border-base-100',
     'emerald-button': 'mt-4 px-3 py-2 text-xs border rounded-lg text-light-400 border-emerald-600 bg-emerald-600 hover-bg-emerald-700 hover-border-emerald-700',
+    'emerald-light-button': 'mt-4 px-3 py-2 text-xs border rounded-lg text-emerald-400 bg-emerald/12 border-emerald-400 hover-bg-emerald-600 hover-border-emerald-600 hover-text-light-700',
     'max-w-base': 'max-w-3xl mx-auto',
     'text-error': 'text-red-700 dark:text-red-400/80',
     'border-error': 'border border-red-700 dark:border-red-400/80',