Walidoux
d26b429ee8
BREAKING CHANGES - Refactored `App.tsx` to import `Component` from `solid-js`, and use a new component `TitleBar`. - Added new component `AnimateView` under `src/components/design`, and renamed old `AnimateView` to `Loader`. - Added new component `Button` under `src/components/design`. - Added new component `Image` under `src/components/design`. - Moved old `Image`, `Loader`, and `Button` components under `src/components/design`. - Refactored `Downloader` component to use `Motion` from `@motionone/solid`, moved it under `Downloader` folder, and used it to create a slick hover effect. - Removed `Downloaders/Button`. Notes: - Used `createSignal` instead of `useState` for SolidJS in `Downloaders.tsx`. - Used `type` keyword to explicitly define the type of the component props or objects where it makes the code clearer.
58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import { Motion } from '@motionone/solid'
|
|
import classNames from 'classnames'
|
|
import type { Component, JSXElement } from 'solid-js'
|
|
import { For, createSignal } from 'solid-js'
|
|
|
|
import type { GameDataDownloader } from '../../../../config'
|
|
import { Animation } from '../../../../config'
|
|
import { AnimateView } from '../../../design'
|
|
|
|
interface DownloaderProps {
|
|
className?: string
|
|
children: JSXElement
|
|
content: typeof GameDataDownloader
|
|
}
|
|
|
|
export const Downloader: Component<DownloaderProps> = (props) => {
|
|
const [activeContent, setActiveContent] = createSignal(false)
|
|
|
|
const handleActiveContent = (): boolean => {
|
|
return setActiveContent(!activeContent())
|
|
}
|
|
|
|
return (
|
|
<li
|
|
class={classNames(props.className, 'relative rounded-xl shadow-red-500 hover:shadow-2xl')}
|
|
onMouseEnter={handleActiveContent}
|
|
onMouseLeave={handleActiveContent}>
|
|
{props.children}
|
|
|
|
<AnimateView
|
|
condition={activeContent()}
|
|
animation={Animation.fadeInOut()}
|
|
class='pointer-events-none absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center rounded-xl bg-black/70 pb-5 text-center text-[12px] text-white'>
|
|
<Motion.h1
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -20 }}
|
|
class='mb-3 text-[16px]'>
|
|
{props.content.title}
|
|
</Motion.h1>
|
|
|
|
<For each={props.content.features}>
|
|
{(feature) => {
|
|
return (
|
|
<Motion.span
|
|
initial={{ opacity: 0, y: 50, scale: 0.75 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
exit={{ opacity: 0, y: 50, scale: 0.75 }}>
|
|
{feature}
|
|
</Motion.span>
|
|
)
|
|
}}
|
|
</For>
|
|
</AnimateView>
|
|
</li>
|
|
)
|
|
}
|