rootadmin/multisite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

greyscale

Browse source
This commit is contained in:
Mackie 2026-05-30 12:22:46 +08:00
parent 270e7afecc
commit 322c75eaef
1 changed files with 13 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/blocks/SkillsMarquee/Component.tsx
View file

@ -1,9 +1,7 @@
'use client' 'use client'
import React from 'react' import React from 'react'
import { cn } from '@/utilities/ui'
import { InfiniteSlider } from '@/components/ui/infinite-slider' import { InfiniteSlider } from '@/components/ui/infinite-slider'
import { useThemeMode } from '@/hooks/useThemeMode'
const LOGOS = [ const LOGOS = [
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/aftereffects-plain.svg', alt: 'aftereffects' }, { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/aftereffects-plain.svg', alt: 'aftereffects' },
@ -67,27 +65,22 @@ type SkillsMarqueeBlockProps = {
} }
export function SkillsMarqueeBlock({ heading }: SkillsMarqueeBlockProps) { export function SkillsMarqueeBlock({ heading }: SkillsMarqueeBlockProps) {
const { isDark } = useThemeMode()
const text = isDark ? 'text-white/40' : 'text-black/40'
const border = isDark ? 'border-white/10' : 'border-black/10'
return ( return (
<section className={cn('relative border-t py-8', border)}> <section className="relative border-t border-foreground/10 py-8">
<p className={cn('mb-6 text-center text-xs tracking-widest uppercase px-6', text)}> <p className="mb-6 text-center text-xs tracking-widest uppercase px-6 text-foreground/40">
{heading || 'Skills'} {heading || 'Skills'}
</p> </p>
<div className="[mask-image:linear-gradient(to_right,transparent,black,transparent)]"> <div className="[mask-image:linear-gradient(to_right,transparent,black,transparent)]">
<InfiniteSlider gap={48} duration={120}> <InfiniteSlider gap={48} duration={120}>
{LOGOS.map((l) => ( {LOGOS.map((l) => (
<img <img
key={l.alt} key={l.alt}
src={l.src} src={l.src}
alt={l.alt} alt={l.alt}
style={{ filter: 'grayscale(1) var(--tw-invert)' }} className="h-14 w-auto flex-shrink-0 pointer-events-none select-none grayscale opacity-25 dark:opacity-35"
className="h-14 w-auto flex-shrink-0 pointer-events-none select-none grayscale opacity-25 dark:opacity-35" />
/> ))}
))} </InfiniteSlider>
</InfiniteSlider>
</div> </div>
</section> </section>
) )