💄 style: Update list item style

bentwnghk · Nov 26, 2024 · 613c42a · 613c42a
1 parent 53a83be
commit 613c42a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 22 deletions.
diff --git a/docs/index.tsx b/docs/index.tsx
@@ -35,9 +35,12 @@ export default () => (
 export default () => {
   const theme = useTheme();
   return (
-    <Center gap={48}>
+    <Center
+      gap={48}
+      style={{ maxWidth: 960, overflow: 'hidden', position: 'relative', width: '100%' }}
+    >
       <Center>
-        <h2 style={{ fontSize: 20 }}>🤯 Start building your AIGC app now</h2>
+        <h2 style={{ fontSize: 20, textAlign: 'center' }}>Start building your AIGC app now</h2>
         <Snippet language={'bash'}>{'$ bun add @lobehub/ui'}</Snippet>
         <p style={{ color: theme.colorTextSecondary, textAlign: 'center' }}>
           The Lobe UI components are developed based on{' '}
@@ -52,7 +55,11 @@ export default () => {
           as the default css-in-js styling solution.
         </p>
       </Center>
-      <Highlighter language={'tsx'} style={{ width: '100%' }} type={'ghost'}>
+      <Highlighter
+        language={'tsx'}
+        style={{ background: theme.colorFillTertiary, width: '100%' }}
+        type={'ghost'}
+      >
         {example}
       </Highlighter>
       <Features items={items} />

diff --git a/src/Hero/index.tsx b/src/Hero/index.tsx
@@ -64,7 +64,7 @@ const Hero = memo<HeroProps>(({ title, description, actions, Link }) => {
   const ButtonGroups = useCallback(
     () =>
       Boolean(actions?.length) && (
-        <Flexbox className={styles.actions} gap={24} horizontal justify={'center'}>
+        <Flexbox className={styles.actions} gap={16} horizontal justify={'center'}>
           {actions!.map(({ text, link, openExternal, icon, type }, index) => {
             // @ts-ignore
             const ButtonIcon = icon === 'Github' ? <Icon icon={Github} /> : icon;

diff --git a/src/List/ListItem/index.tsx b/src/List/ListItem/index.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Typography } from 'antd';
 import { Loader2, MessageSquare } from 'lucide-react';
 import { ReactNode, forwardRef } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
@@ -9,6 +10,8 @@ import Icon from '@/Icon';
 import { useStyles } from './style';
 import { getChatItemTime } from './time';
 
+const { Title, Paragraph } = Typography;
+
 export interface ListItemProps extends Omit<FlexboxProps, 'title'> {
   actions?: ReactNode;
   active?: boolean;
@@ -74,14 +77,20 @@ const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
             <div className={styles.triangle}></div>
           </div>
         )}
-        {avatar ?? <Icon icon={MessageSquare} style={{ marginTop: 4 }} />}
 
-        <Flexbox className={styles.content} gap={8}>
-          <Flexbox distribution={'space-between'} horizontal>
-            <div className={styles.title}>{title}</div>
+        <Flexbox align={'flex-start'} flex={1} gap={8} horizontal style={{ overflow: 'hidden' }}>
+          {avatar ?? <Icon icon={MessageSquare} style={{ marginTop: 4 }} />}
+          <Flexbox className={styles.content} gap={4}>
+            <Title className={styles.title} ellipsis={{ rows: 1 }} level={3}>
+              {title}
+            </Title>
+            {description && (
+              <Paragraph className={styles.desc} ellipsis={{ rows: 1 }}>
+                {description}
+              </Paragraph>
+            )}
+            {addon}
           </Flexbox>
-          {description && <div className={styles.desc}>{description}</div>}
-          {addon}
         </Flexbox>
 
         {loading ? (
@@ -105,7 +114,7 @@ const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
             {date && (
               <div
                 className={cx(styles.time, classNames?.time)}
-                style={showAction ? { display: 'none' } : {}}
+                style={showAction ? { opacity: 0 } : {}}
               >
                 {getChatItemTime(date)}
               </div>

diff --git a/src/List/ListItem/style.ts b/src/List/ListItem/style.ts
@@ -42,15 +42,12 @@ export const useStyles = createStyles(({ css, token }) => {
       align-self: center;
     `,
     desc: css`
-      overflow: hidden;
-
       width: 100%;
+      margin: 0 !important;
 
       font-size: 12px;
-      line-height: 1;
+      line-height: 1.2 !important;
       color: ${token.colorTextDescription};
-      text-overflow: ellipsis;
-      white-space: nowrap;
     `,
 
     pin: css`
@@ -64,15 +61,13 @@ export const useStyles = createStyles(({ css, token }) => {
     `,
 
     title: css`
-      overflow: hidden;
-
       width: 100%;
+      margin: 0 !important;
 
-      font-size: 16px;
-      line-height: 1;
+      font-size: 14px !important;
+      font-weight: 500 !important;
+      line-height: 1.2 !important;
       color: ${token.colorText};
-      text-overflow: ellipsis;
-      white-space: nowrap;
     `,
     triangle: css`
       width: 10px;

diff --git a/src/List/demos/index.tsx b/src/List/demos/index.tsx
@@ -10,6 +10,7 @@ export default () => {
       actions: <ActionIcon icon={MoreHorizontalIcon} />,
       active: false,
       avatar: <Avatar avatar={'😊'} />,
+      date: Date.now(),
       description: 'Description 1',
       pin: true,
       showAction: true,
@@ -19,6 +20,7 @@ export default () => {
       actions: <ActionIcon icon={MoreHorizontalIcon} />,
       active: false,
       avatar: <Avatar avatar={'😊'} />,
+      date: Date.now(),
       description: 'Description 2',
       title: 'Item 2',
     },