Skip to content

S
sdream-ai-fe
Commit b7cfa85b by HoMeTown
Options

feat: border

parent 98e9ba05
Showing with 17 additions and 6 deletions
src/components/ShineBorder/index.tsx
...@@ -8,6 +8,7 @@ interface ShineBorderProps { ...@@ -8,6 +8,7 @@ interface ShineBorderProps {
borderWidth?: number borderWidth?: number
duration?: number duration?: number
className?: string className?: string
innerClassName?: string
children: React.ReactNode children: React.ReactNode
} }
...@@ -26,9 +27,10 @@ export default function ShineBorder({ ...@@ -26,9 +27,10 @@ export default function ShineBorder({
borderWidth = 1, borderWidth = 1,
duration = 14, duration = 14,
className, className,
innerClassName,
children, children,
}: ShineBorderProps) { }: ShineBorderProps) {
const color = ['#B4F4FF', '#CBC2FF', '#29B6FD'] const color = ['#B4F4FF', '#CBC2FF', '#BFE9FE']
const [isIn, setIsIn] = useState(false) const [isIn, setIsIn] = useState(false)
return ( return (
<div <div
...@@ -40,7 +42,7 @@ export default function ShineBorder({ ...@@ -40,7 +42,7 @@ export default function ShineBorder({
} as React.CSSProperties } as React.CSSProperties
} }
className={cn( className={cn(
'relative grid min-h-[60px] w-fit min-w-[300px] place-items-center rounded-[--border-radius] bg-white p-3 text-black dark:bg-black dark:text-white', 'relative',
className, className,
)} )}
> >
...@@ -59,7 +61,9 @@ export default function ShineBorder({ ...@@ -59,7 +61,9 @@ export default function ShineBorder({
className={`before:bg-shine-size before:absolute before:inset-0 before:aspect-square before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[""] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:[mask:--mask-linear-gradient] motion-safe:before:animate-[shine-pulse_var(--shine-pulse-duration)_infinite_linear]`} className={`before:bg-shine-size before:absolute before:inset-0 before:aspect-square before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[""] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:[mask:--mask-linear-gradient] motion-safe:before:animate-[shine-pulse_var(--shine-pulse-duration)_infinite_linear]`}
> >
</div> </div>
<div className={`relative z-1 w-full h-full ${innerClassName}`}>
{children} {children}
</div> </div>
</div>
) )
} }
src/pages/Collect/Collect.tsx
...@@ -16,6 +16,7 @@ import { MarkdownDetail } from '@/components/MarkdownDetail' ...@@ -16,6 +16,7 @@ import { MarkdownDetail } from '@/components/MarkdownDetail'
import AIcon from '@/assets/svg/aicon.svg?react' import AIcon from '@/assets/svg/aicon.svg?react'
import QIcon from '@/assets/svg/qicon.svg?react' import QIcon from '@/assets/svg/qicon.svg?react'
import EmptyIcon from '@/assets/svg/empty.svg?react' import EmptyIcon from '@/assets/svg/empty.svg?react'
import ShineBorder from '@/components/ShineBorder'
export const Collect: React.FC = () => { export const Collect: React.FC = () => {
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
...@@ -104,7 +105,12 @@ export const Collect: React.FC = () => { ...@@ -104,7 +105,12 @@ export const Collect: React.FC = () => {
> >
{ {
collectList.map((item: any, index: number) => ( collectList.map((item: any, index: number) => (
<div className="text-[#27353C] w-full max-w-[1000px] mx-auto bg-white rounded-[20px] box-border px-[24px] py-[20px]" key={`${item.collectionId}_${index}`}>
<ShineBorder
borderRadius={20}
className="text-[#27353C] w-full max-w-[1000px] mx-auto bg-white rounded-[20px] box-border px-[24px] py-[20px]"
key={`${item.collectionId}_${index}`}
>
<div className="flex mb-[20px]"> <div className="flex mb-[20px]">
<div className="mr-[20px]"><QIcon /></div> <div className="mr-[20px]"><QIcon /></div>
<div className="font-bold text-[16px]">{item.question}</div> <div className="font-bold text-[16px]">{item.question}</div>
...@@ -133,7 +139,7 @@ export const Collect: React.FC = () => { ...@@ -133,7 +139,7 @@ export const Collect: React.FC = () => {
</div> </div>
</div> </div>
</div> </div>
</div> </ShineBorder>
)) ))
} }
</motion.div> </motion.div>
......
src/pages/Tools/Tools.tsx
...@@ -63,10 +63,11 @@ export const Tools: React.FC = () => { ...@@ -63,10 +63,11 @@ export const Tools: React.FC = () => {
<div className="max-w-[1000px] flex mx-auto mt-[64px] text-18px text-[#5AA9D0] font-light">全部工具</div> <div className="max-w-[1000px] flex mx-auto mt-[64px] text-18px text-[#5AA9D0] font-light">全部工具</div>
<div className="max-w-[1000px] mx-auto gap-[20px] flex flex-col flex-wrap mt-[22px] sm:flex-row"> <div className="max-w-[1000px] mx-auto gap-[20px] flex flex-col flex-wrap mt-[22px] sm:flex-row">
{tools.map((item, index) => ( {tools.map((item, index) => (
<motion.div key={index} onClick={handleClickToolItem} {...getAnimationProps(index + 1)}> <motion.div className="flex-1" key={index} onClick={handleClickToolItem} {...getAnimationProps(index + 1)}>
<ShineBorder <ShineBorder
borderRadius={20} borderRadius={20}
className="rounded-[20px] bg-[#fff] flex-1 h-[100px] p-[24px] flex items-center cursor-pointer" className="rounded-[20px] bg-[#fff] flex-1 h-[100px] p-[24px] cursor-pointer"
innerClassName="flex items-center"
> >
<img className="w-[52px]" src={item.icon} alt="" /> <img className="w-[52px]" src={item.icon} alt="" />
<div className="ml-[20px]"> <div className="ml-[20px]">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment