feat: adding CSS filter property to the photos

[farshad-vgr]

• [ ] I have followed the 'Sending a Pull Request' section of the contributing guide

The " filter " property defines visual effects (like blur and grayscale) to an img element:

<PhotoAlbum filter="grayscale(1) drop-shadow(4px 4px 16px black)" layout="rows" photos={photos} />

All these values can be used: filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | URL();

https://www.w3schools.com/cssref/css3_pr_filter.php

[igordanchenko]

Thank you for suggesting this feature, but this prop seems redundant considering that the desired effect can be implemented in at least 2 different ways already.

1) With the componentsProps prop:

<PhotoAlbum
    layout="rows"
    photos={photos}
    componentsProps={{ imageProps: { style: { filter: "grayscale(1) drop-shadow(4px 4px 16px black)" } } }}
/>

2) With the renderPhoto render function:

<PhotoAlbum
    layout="rows"
    photos={photos}
    renderPhoto={({ imageProps: { alt, style, ...restImageProps } }) => (
        <img
            alt={alt}
            style={{ ...style, filter: "grayscale(1) drop-shadow(4px 4px 16px black)" }}
            {...restImageProps}
        />
    )}
/>