[Images] Two Elements Gallery

Lory1990 / react-cool-components

A Small Library to user MaterialUI components with Formik

https://lory1990.github.io/react-cool-components/

MIT License

3 stars 1 forks source link

[Images] Two Elements Gallery #3

Closed Lory1990 closed 2 years ago

Lory1990 commented 3 years ago

Creare il componente TwoElements tipo Gallery

Crearlo in gallery\TwoElements

1626774419470

Lory1990 commented 3 years ago

Ciao Marco, per questo task puoi iniziare a creare un componente react dove passerai come props due immagini :) e poi lo vediamo insieme

Ti lascio le istruzioni per lavorare bene

Stacca un branch con _ -> mperetto_TwoElementsGallery
Crea la cartella gallery
Crea un cartella in gallery chiamata TwoElementsGallery
In TwoElementsGallery crea i files TwoElementsGallery.tsx, TwoElementsGallery.module.scss, TwoElementsGallery.stories.tsx, index.ts

Poi vediamo insieme come visualizzare il componente, si fa tramite "TwoElementsGallery.stories.tsx"

mperetto commented 2 years ago

Ciao ho creato il branch e aggiunto i file.

Poi ho creato il componente React su codepen prima di aggiungerlo a storybook.

Questo è link con il codice: Creative img clip-path effect React-component.

Lory1990 commented 2 years ago

Ciao Marco, ottimo codice, ho fatto qualche micro modifica sul CSS

Tra le props ho aggiunto gli attributi ALT
Per visualizzare il CSS devi scrivere style[classeCSS] altrimenti non lo prende, questi sono i CSS modules
Nelle props ho aggiunto l'attributo "classes" che serve a specificare le classi per ciascun elemento (in questo caso le immagini)
Ho aggiunto tra le prps il className del componente

E nella storia

Ho aggiunto tre storie che devi completare: solo img SX, solo img DX, no imgs -> Devi gestire questi casi perché gli sviluppatori sono distratti
Ho messo il componente sotto Gallery

anyway OTTIMO LAVORO :)

mperetto commented 2 years ago

Ciao ho implementato le 3 nuove storie, in pratica per le immagini singole ho rimosso il clip-path e le ho visualozzate a schermo intero. Invece per le immagini mancanti al loro posto ho visualizzato un linear gradient come background del container.

Lory1990 commented 2 years ago

@mperetto ci siamo, proprio ora sto facendo il Deploy della tua carta :) Il task è chiuso

Ho modificato un attimo il tuo codice per inserire la logica all'interno del tuo componente e non nella logica