/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    images: {
        dangerouslyAllowSVG: true,
        remotePatterns: [
            {
                protocol: 'https',
                hostname: 'cdn.sanity.io',
            },
            {
                protocol: 'https',
                hostname: 'i.vimeocdn.com',
            },
        ],
    },
    webpack(config) {
        // Grab the existing rule that handles SVG imports
        const fileLoaderRule = config.module.rules.find((rule) =>
            rule.test?.test?.('.svg'),
        )

        config.module.rules.push(
            // Reapply the existing rule, but only for svg imports ending in ?url
            {
                ...fileLoaderRule,
                test: /\.svg$/i,
                resourceQuery: /url/, // *.svg?url
            },
            // Convert all other *.svg imports to React components
            {
                test: /\.svg$/i,
                issuer: fileLoaderRule.issuer,
                resourceQuery: {
                    not: [...fileLoaderRule.resourceQuery.not, /url/],
                }, // exclude if *.svg?url
                use: ['@svgr/webpack'],
            },
        )

        // Modify the file loader rule to ignore *.svg, since we have it handled now.
        fileLoaderRule.exclude = /\.svg$/i

        return config
    },
}

export default nextConfig

import { PlatformLinkType } from '@/sanity/schemaTypes/objects/platformLink'

import AppleIcon from '@/images/apple-podcast.svg'
import LinkedinIcon from '@/images/linkedin.svg'
import SpotifyIcon from '@/images/spotify.svg'
import GenericIcon from '@/images/web.svg'
import YoutubeIcon from '@/images/youtube.svg'

type Props = {
    data: PlatformLinkType
    template?: string
}

const PlatformLink: React.FC<Props> = ({ data, template }) => {
    if (!data.platform) {
        return null
    }

    console.log(SpotifyIcon)

    return (
        <a href={data.url} target="_blank" className="group">
            <SpotifyIcon />

            <span className="text-red group-hover:underline">Link</span>
        </a>
    )
}

export default PlatformLink