@anker-in/headless-ui 0.0.26 → 0.0.27-alpha.0

package/src/biz-components/BrandEquity/BrandEquity.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+
+import { cn } from '../../helpers/utils'
+import Picture from '../../components/picture'
+import { withStyles } from '../../shared/Styles.js'
+import type { ComponentCommonProps } from '../../types/props.js'
+
+export interface BrandEquityItem {
+  icon?: React.ReactNode
+  title: string
+  description: string
+  avatarList?: string[]
+}
+
+export interface BrandEquityProps extends ComponentCommonProps {
+  items: BrandEquityItem[]
+  itemShape?: 'round' | 'square'
+  className?: string
+  theme?: 'light' | 'dark'
+}
+
+const BrandEquity: React.FC<BrandEquityProps> = ({ items = [], itemShape = 'square', style = '', className = '' }) => {
+  return (
+    <div className={cn('brand-equity-wrapper w-full', className)}>
+      <div
+        className={cn(
+          'grid gap-3 px-4',
+          'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+          'md:gap-4',
+          'lg:px-[140px] xl:px-[175px] 2xl:px-[268px]'
+        )}
+      >
+        {items.map((item, index) => (
+          <div
+            key={index}
+            className={cn(
+              'brand-equity-item',
+              'bg-white p-4 flex flex-col',
+              'lg:p-6',
+              'gap-12 lg:gap-16',
+              itemShape === 'round' ? 'rounded-[16px]' : 'rounded-none'
+            )}
+          >
+            <div className="flex justify-between items-center gap-3">
+              <h3 className="text-sm font-semibold text-[#1D1D1F] leading-[1.2] tracking-[-0.02em] 2xl:text-lg">
+                {item.title}
+              </h3>
+              {item.avatarList?.length ? (
+                <div className="flex -space-x-2">
+                  {item.avatarList.map((avatarUrl: string, index: number) => (
+                    <div
+                      key={index}
+                      className={cn(
+                        'size-[30px] rounded-full border-2 border-white overflow-hidden',
+                        'relative inline-block',
+                        'xl:size-[36px]'
+                      )}
+                    >
+                      <Picture source={avatarUrl} className="w-full h-full object-cover" />
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <span className="text-[#1D1D1F]">{item.icon}</span>
+              )}
+            </div>
+            <p className="font-bold text-xl text-[#1D1D1F] leading-[1.2] tracking-[-0.04em] 2xl:text-2xl">
+              {item.description}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default withStyles(BrandEquity)

package/src/biz-components/BrandEquity/index.ts

@@ -0,0 +1 @@
+export { default } from './BrandEquity.js'

package/src/biz-components/Category/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { cn } from '../../helpers/utils'
+import Picture from '../../components/picture'
+
+export interface CategoryItem {
+  /** 产品图片*/
+  img: string
+  title: string
+}
+
+export interface CategoryProps {
+  products: CategoryItem[]
+  className?: string
+  /** 主题色*/
+  theme?: 'light' | 'dark'
+  /** 卡片形状 */
+  shape?: 'round' | 'square'
+}
+
+const Category: React.FC<CategoryProps> = ({
+  className = '',
+  shape = 'square',
+  products = [],
+}) => {
+  return (
+    <>
+      <div className={cn('w-full', className)}>
+        <div className={cn('flex overflow-hidden', 'md:px-[140px] lg:px-[268px]')}>
+          <div className={cn('w-full flex', 'gap-3 md:gap-4 overflow-x-auto overflow-y-hidden')}>
+            {products?.map((item, index) => {
+              return (
+                <div
+                  key={index}
+                  className={cn(
+                    'bg-[#EAEAEC] p-4 flex flex-col min-w-[167px] max-w-[167px] box-border overflow-hidden',
+                    'md:min-w-[205px] md:max-w-[205px] lg:min-w-[264px] lg:max-w-[264px] md:p-6 lg:p-8',
+                    shape === 'round' ? 'rounded-[16px]' : 'rounded-none'
+                  )}
+                >
+                  <Picture
+                    className="w-full object-cover"
+                    source={item?.img}
+                  />
+                  <p className="flex-1 text-sm text-center font-semibold lg:text-lg">
+                    {item?.title}
+                  </p>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Category

package/src/biz-components/Evaluate/index.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { cn } from '../../helpers/utils'
+import Picture from '../../components/picture'
+import { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar'
+
+export interface EvaluateItem {
+  /** 产品图片*/
+  img: string
+  title: string
+  subTitle: string
+  description: string
+  avatar?: string
+}
+
+export interface EvaluateProps {
+  products: EvaluateItem[]
+  className?: string
+  /** 主题色*/
+  theme?: 'light' | 'dark'
+  /** 形状 */
+  shape?: 'round' | 'square'
+}
+
+const Evaluate: React.FC<EvaluateProps> = ({
+  className = '',
+  shape = 'square',
+  products = [],
+}) => {
+  return (
+    <>
+      <div className={cn('w-full', className)}>
+        <div className={cn('flex overflow-hidden', 'md:px-[140px] lg:px-[268px]')}>
+          <div className={cn('w-full flex', 'gap-3 md:gap-4 overflow-x-auto overflow-y-hidden')}>
+            {products?.map((item, index) => {
+              return (
+                <div
+                  key={index}
+                  className={cn(
+                    'bg-[#EAEAEC] p-4 flex flex-col min-w-[288px] max-w-[288px] box-border overflow-hidden',
+                    'md:min-w-[316px] md:max-w-[316px] lg:min-w-[404px] lg:max-w-[404px] lg:pt-4 lg:px-6 lg:pb-6',
+                    shape === 'round' ? 'rounded-2xl' : 'rounded-none'
+                  )}
+                >
+                  <div className={cn('mb-8 w-full flex justify-between md:mb-11 lg:mb-16')}>
+                    <div className="flex-1">
+                      <h4 className="text-sm font-semibold md:text-lg">{item?.title}</h4>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path
+                          d="M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z"
+                          fill="#F77234"
+                        />
+                      </svg>
+                    </div>
+                    <div className="size-10 overflow-hidden lg:size-12">
+                      <Avatar className="w-full h-full">
+                        <AvatarImage src={item?.avatar} />
+                        <AvatarFallback>{item?.title}</AvatarFallback>
+                      </Avatar>
+                    </div>
+                  </div>
+                  <p className="flex-1 line-clamp-6 font-bold text-xl text-[#1D1D1F] lg:text-2xl">
+                    {item?.description || ''}
+                  </p>
+                  <div className={cn('mt-11 p-3 flex items-center bg-[#F7F8F9] overflow-hidden', shape === 'round' ? 'rounded-[8px]' : 'rounded-none')}>
+                    <div className="flex items-center mr-3 size-12 md:size-16 lg:size-20">
+                      <Picture
+                        className="w-full object-cover"
+                        source={item?.img}
+                      />
+                    </div>
+                    <p className="flex-1 text-sm font-semibold line-clamp-2 lg:text-lg">
+                      {item?.subTitle || ''}
+                    </p>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Evaluate

package/src/biz-components/HeroBanner/HeroBanner.tsx

@@ -0,0 +1,103 @@
+import React from "react"
+import type { HeroBannerProps } from "./types.js"
+import { Button, Text } from "../../components/index.js"
+import { cn } from "../../helpers/index.js"
+import { withStyles } from "../../shared/Styles.js"
+
+const HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(
+  ({ 
+    title, 
+    subtitle, 
+    background,
+    primaryButton,
+    secondaryButton,
+    theme = "light",
+    className,
+    products = [] 
+  }, ref) => {
+    const textColorClass = theme === "dark" ? "text-white" : "text-[#1D1D1F]"
+    const dividerColorClass = theme === "dark" ? "bg-white" : "bg-[#1D1D1F]"
+
+    return (
+      <div 
+        ref={ref} 
+        className={cn(
+          "relative flex min-h-[720px] w-full flex-col justify-between overflow-hidden bg-cover bg-center bg-no-repeat",
+          className
+        )}
+        style={{ backgroundImage: `url(${background})` }}
+      >
+        {/* 内容区域 */}
+        <div className="relative z-10 flex flex-col gap-8 px-32 pt-[307px]">
+          <div className="max-w-[686px] space-y-4">
+            <h1 className={cn(
+              "hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]",
+              textColorClass
+            )}>
+              {title}
+            </h1>
+            <p className={cn(
+              "hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]",
+              textColorClass
+            )}>
+              {subtitle}
+            </p>
+          </div>
+          
+          {/* 按钮组 */}
+          <div className="flex items-center gap-4">
+            {secondaryButton && (
+              <Button
+                size="lg"
+                variant="nature"
+                theme={theme}
+                className="hero-banner-primary-button"
+                {...secondaryButton}
+              >
+                {secondaryButton.text}
+              </Button>
+            )}
+            {primaryButton && (
+              <Button
+                size="lg"
+                variant="secondary"
+                theme={theme}
+                {...primaryButton}
+                className="hero-banner-secondary-button bg-transparent border-black text-black hover:bg-black hover:text-white"
+              >
+                {primaryButton.text}
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* 底部产品列表 */}
+        {products.length > 0 && (
+          <div className="relative z-10 flex items-center gap-3 px-32 pb-6">
+            {products.map((product, index) => (
+              <React.Fragment key={index}>
+                <Text
+                  className={cn(
+                    "hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]",
+                    theme === "dark" ? "text-white" : "text-[#1D1D1F]"
+                  )}
+                >
+                  {product.title}
+                </Text>
+                {index < products.length - 1 && (
+                  <div className={cn("h-4 w-px", dividerColorClass)} />
+                )}
+              </React.Fragment>
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+
+HeroBanner.displayName = "HeroBanner"
+
+export default withStyles(HeroBanner)
+
+

package/src/biz-components/HeroBanner/index.tsx

@@ -0,0 +1 @@
+export { default } from './HeroBanner.js'

package/src/biz-components/HeroBanner/types.ts

@@ -0,0 +1,28 @@
+import type { ButtonProps } from "../../components/button"
+
+export interface HeroBannerProps {
+  /** 主标题 */
+  title: string
+  /** 副标题/描述文本 */
+  subtitle: string
+  /** 背景图片URL */
+  background: string
+  /** 主按钮文本和配置 */
+  primaryButton?: {
+    text: string
+  } & Omit<ButtonProps, 'children'>
+  /** 次要按钮文本和配置 */
+  secondaryButton?: {
+    text: string
+  } & Omit<ButtonProps, 'children'>
+  /** 自定义类名 */
+  className?: string
+  /** 主题 */
+  theme?: "light" | "dark"
+  /** 底部产品列表 */
+  products?: Array<{
+    title: string
+    active?: boolean
+  }>
+}
+  

package/src/biz-components/Marquee/index.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { cn } from '../../helpers/utils.js'
+import { default as FastMarquee } from 'react-fast-marquee'
+import { type MarqueeProps as FastMarqueeProps } from 'react-fast-marquee'
+import { Picture, Text } from '../../components'
+
+const Marquee = React.forwardRef<HTMLDivElement, FastMarqueeProps>(
+  ({children, ...props}, ref) => {
+    return (
+      <FastMarquee
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </FastMarquee>
+    )
+  }
+)
+
+Marquee.displayName = 'Marquee'
+
+interface MarqueeListProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const MarqueeList = React.forwardRef<
+HTMLDivElement,
+MarqueeListProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <div className={cn("flex gap-6 items-center md:gap-16", className)} ref={ref}>
+      {children}
+    </div>
+  )
+})
+
+MarqueeList.displayName = 'MarqueeList'
+
+interface MarqueeImageContentProps {
+  image: string
+  className?: string;
+}
+
+const MarqueeImageContent = ({ image, className }: MarqueeImageContentProps) => {
+  return (
+    <Picture 
+      source={image}
+      className={cn("aspect-w-[120] w-[72px] aspect-h-[80] md:w-[120px]", className)}
+      imgClassName="object-cover"
+    />
+  )
+}
+
+MarqueeImageContent.displayName = 'MarqueeImageContent'
+
+interface MarqueeTextContentProps {
+  text: string
+  className?: string;
+}
+
+const MarqueeTextContent = React.forwardRef<
+HTMLDivElement,
+MarqueeTextContentProps
+>(({ text, className }, ref) => {
+  return (
+    <Text
+      as="div"
+      ref={ref}
+      html={text}
+      className={cn("size-14 text-nowrap flex items-center justify-center leading-[1.2] text-lines-2 font-medium", className)}
+    />
+  )
+})
+
+MarqueeTextContent.displayName = 'MarqueeTextContent'
+
+export { Marquee, MarqueeList, MarqueeImageContent, MarqueeTextContent }
+export type { FastMarqueeProps, MarqueeListProps, MarqueeImageContentProps, MarqueeTextContentProps }

package/src/biz-components/MemberEquity/index.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Button } from '../../components/index.js';
+import { withStyles } from '../../shared/Styles.js';
+import type { MemberEquityProps } from './types.js';
+
+const MemberEquity: React.FC<MemberEquityProps> = ({
+  title,
+  description,
+  backgroundImage,
+  primaryButton,
+  secondaryButton,
+  shape = 'square',
+  theme = 'light',
+  className = '',
+}) => {
+
+  const handleButtonPrimaryClick = () => {
+    // 执行主按钮的点击事件
+
+  }
+
+  const handleButtonSecondaryClick = () => {
+    // 执行副按钮的点击事件
+  }
+
+  return (
+    <section
+      data-ui-component-id="MemberEquity"
+      className={`
+        relative w-full overflow-hidden bg-[#242426]
+        ${shape === 'round' ? 'rounded-none sm:rounded-lg md:rounded-xl lg:rounded-2xl' : ''}
+        ${className}
+      `}
+    >
+
+      <div
+        className="absolute inset-0 w-full h-full"
+        style={{
+          backgroundImage: `
+            radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),
+            url(${backgroundImage})
+          `,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }}
+      />
+      <div className={`
+        relative w-full mx-auto
+        aspect-[343/200] xs:aspect-[343/200]
+        sm:aspect-[343/200] 
+        md:aspect-[592/336]
+        lg:aspect-[800/448]
+        xl:aspect-[1000/560]
+        flex items-center
+      `}>
+        <div className={`
+          w-full px-4 sm:px-6 md:px-[76px] lg:px-[111px] xl:px-[139px]
+          flex flex-col gap-4 sm:gap-5 md:gap-6 lg:gap-7 xl:gap-8
+        `}>
+          <div className="flex flex-col gap-2 sm:gap-2 md:gap-3 lg:gap-3 xl:gap-4">
+            <h2 className={`
+              member-equity-title font-mont font-bold text-white tracking-[-0.04em]
+              text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-[32px]
+              leading-[1.2]
+              max-w-[280px] sm:max-w-[300px] md:max-w-[400px] lg:max-w-[500px] xl:max-w-[547px]
+            `}>
+              {title}
+            </h2>
+            <p className={`
+              member-equity-description font-pingfang font-semibold text-white tracking-[-0.02em]
+              text-sm sm:text-sm md:text-base lg:text-lg xl:text-lg
+              leading-[1.4]
+              max-w-[260px] sm:max-w-[286px] md:max-w-[350px] lg:max-w-[426px] xl:max-w-[547px]
+            `}>
+              {description}
+            </p>
+          </div>
+
+          {/* 按钮组 */}
+          <div className="flex items-center gap-3 sm:gap-3 md:gap-4 lg:gap-4 xl:gap-4">
+            <Button
+              theme={theme}
+              variant="primary"
+              onClick={handleButtonPrimaryClick}
+              className={`
+                member-equity-button-primary bg-transparent border-white border-[1px] text-white text-xs sm:text-sm md:text-sm lg:text-base xl:text-base
+                px-4 sm:px-5 md:px-6 lg:px-7 xl:px-7 hover:bg-white hover:text-black
+                py-2 sm:py-[10px] md:py-[11px] lg:py-[12px] xl:py-[14px]
+                ${shape === 'round' ? 'rounded-[16px] sm:rounded-[19px] md:rounded-[20px] lg:rounded-[22px] xl:rounded-[24px]' : ''}
+              `}
+            >
+              {primaryButton.text}
+            </Button>
+            <Button
+              theme={theme}
+              variant="secondary"
+              onClick={handleButtonSecondaryClick}
+              className={`
+                member-equity-button-secondary text-xs sm:text-sm md:text-sm lg:text-base xl:text-base
+                px-4 sm:px-5 md:px-6 lg:px-7 xl:px-7
+                py-2 sm:py-[10px] md:py-[11px] lg:py-[12px] xl:py-[14px]
+                ${shape === 'round' ? 'rounded-[16px] sm:rounded-[19px] md:rounded-[20px] lg:rounded-[22px] xl:rounded-[24px]' : ''}
+              `}
+            >
+              {secondaryButton.text}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default withStyles(MemberEquity); 

package/src/biz-components/MemberEquity/types.ts

@@ -0,0 +1,26 @@
+import type { ComponentCommonProps } from '../../types/props.js';
+
+export interface MemberEquityProps extends ComponentCommonProps {
+  /** 标题 */
+  title: string;
+  /** 描述文本 */
+  description: string;
+  /** 背景图片 URL */
+  backgroundImage: string;
+  /** 主按钮配置 */
+  primaryButton: {
+    text: string;
+    href: string;
+  };
+  /** 副按钮配置 */
+  secondaryButton: {
+    text: string;
+    href: string;
+  };
+  /** 形状 */
+  shape?: 'round' | 'square';
+  /** 主题 */
+  theme?: 'light' | 'dark';
+  /** 自定义类名 */
+  className?: string;
+}

package/src/biz-components/Shelf/Shelf.tsx

@@ -0,0 +1,22 @@
+/**
+ * 这是一个demo 模版
+ */
+import { withStyles } from '../../shared/Styles.js'
+import type { ShelfProps } from './types.js'
+
+const Shelf = (props: ShelfProps) => {
+  console.log('~ Shelf props', props)
+  return (
+    <div>
+      <h1 className="text-2xl font-bold">{props.title}</h1>
+      <h2>{props.subtitle}</h2>
+      <div>
+        {props.products.map(product => (
+          <div key={product.sku}>{product.name}</div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default withStyles(Shelf)

package/src/biz-components/Shelf/index.ts

@@ -0,0 +1 @@
+export { default } from './Shelf.js'

package/src/biz-components/Shelf/types.ts

@@ -0,0 +1,6 @@
+export type ShelfProps = {
+  id: string
+  title: string
+  subtitle: string
+  products: any[]
+}