mirror of
https://github.com/vercel/commerce.git
synced 2025-07-24 18:51:23 +00:00
.github
.vscode
packages
site
assets
components
auth
cart
checkout
common
icons
product
ui
Button
Collapse
Container
Dropdown
ErrorMessage
Grid
Hero
Input
Link
LoadingDots
Logo
Marquee
Marquee.module.css
Marquee.tsx
index.ts
Modal
Quantity
Rating
Sidebar
Skeleton
Text
README.md
context.tsx
index.ts
wishlist
search.tsx
config
lib
pages
public
.env.template
.eslintrc
.gitignore
.npmrc
.prettierignore
.prettierrc
commerce-config.js
commerce.config.json
global.d.ts
next-env.d.ts
next.config.js
package.json
postcss.config.js
tailwind.config.js
tsconfig.json
.editorconfig
.gitignore
.prettierignore
.prettierrc
README.md
license.md
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
turbo.json
40 lines
879 B
TypeScript
40 lines
879 B
TypeScript
import cn from 'clsx'
|
|
import s from './Marquee.module.css'
|
|
import { FC, ReactNode, Component, Children } from 'react'
|
|
import { default as FastMarquee } from 'react-fast-marquee'
|
|
|
|
interface MarqueeProps {
|
|
className?: string
|
|
children?: ReactNode[] | Component[] | any[]
|
|
variant?: 'primary' | 'secondary'
|
|
}
|
|
|
|
const Marquee: FC<MarqueeProps> = ({
|
|
className = '',
|
|
children,
|
|
variant = 'primary',
|
|
}) => {
|
|
const rootClassName = cn(
|
|
s.root,
|
|
{
|
|
[s.primary]: variant === 'primary',
|
|
[s.secondary]: variant === 'secondary',
|
|
},
|
|
className
|
|
)
|
|
|
|
return (
|
|
<FastMarquee gradient={false} className={rootClassName}>
|
|
{Children.map(children, (child) => ({
|
|
...child,
|
|
props: {
|
|
...child.props,
|
|
className: cn(child.props.className, `${variant}`),
|
|
},
|
|
}))}
|
|
</FastMarquee>
|
|
)
|
|
}
|
|
|
|
export default Marquee
|