diff --git a/global.d.ts b/global.d.ts new file mode 100644 index 0000000..48cd86a --- /dev/null +++ b/global.d.ts @@ -0,0 +1,5 @@ +declare module '*.module.css' { + const content: Record; + export default content; + export = content; +} diff --git a/src/components/AppImage.module.css b/src/components/AppImage.module.css new file mode 100644 index 0000000..7097e52 --- /dev/null +++ b/src/components/AppImage.module.css @@ -0,0 +1,13 @@ +.appImage { + @apply relative rounded-md overflow-hidden; +} + +a.appImage { + @apply shadow-black shadow-md hover:shadow-black hover:shadow-sm; + + &:after { + content: ''; + + @apply rounded-md pointer-events-none opacity-0 inset-0 absolute bg-white/10 transition-opacity hover:opacity-100; + } +} diff --git a/src/components/AppImage.tsx b/src/components/AppImage.tsx index 2b5fe70..a4ea150 100644 --- a/src/components/AppImage.tsx +++ b/src/components/AppImage.tsx @@ -1,6 +1,7 @@ import { type FC } from 'react'; import { Link } from 'react-router-dom'; import { cn } from '../utils/cn'; +import * as styles from './AppImage.module.css'; type Props = { className?: string; @@ -10,16 +11,13 @@ type Props = { export const AppImage: FC = ({ className, id, to }) => { return to ? ( - - + + ) : ( - + ); }; diff --git a/tailwind.config.ts b/tailwind.config.ts index 4bc7343..a332d03 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,7 +1,7 @@ import type { Config } from 'tailwindcss'; export default { - content: ['./src/**/*.{html,js,mjs,ts,tsx}', './components/**/*.{html,js,mjs,ts,tsx}'], + content: ['./src/**/*.{html,js,mjs,ts,tsx}'], theme: {}, plugins: [], } satisfies Config;