diff --git a/README.md b/README.md index c24027b..06de3a5 100644 --- a/README.md +++ b/README.md @@ -50,50 +50,3 @@ Configuration is done through the Owncast administration page located on your se # Database Diagram ![image](https://github.com/D4M13N-D3V/neroshitron/assets/13697702/3a22f05b-0de3-4f6c-9f95-06e035d03cb5) - -# React Components -## Gallery Component -The `Gallery` component is a React component used to display a gallery of images. It fetches images from an API and displays them in a Masonry layout. -### Props -- `id` (number): The ID of the gallery to fetch images from. -- `closeMenu` (function): A function to close the menu. -### State -- `isSingle` (boolean): A state to check if only a single image is to be displayed. -- `loaded` (object): A state to keep track of loaded images. -- `selectedImage` (string | null): A state to keep track of the selected image. -- `images` (string[]): A state to store the fetched images. -- `galleryId` (number): A state to store the gallery ID. -### Functions -- `getData`: An async function to fetch images from the API. -- `generateRandomString`: A function to generate a random string of a given length. -- `handleDownload`: A function to handle the download of an image. -### Usage -The example below will load the images of the the gallery with an ID of `58201557-b392-471e-ac55-dcf6171cd18d` and will call the function for `setIsOpen(false)` when the back button is clicked. -```tsx - setIsOpen(false)}> -``` - - -## GalleryThumbnail Component -The `GalleryThumbnail` component is a React component used to display a thumbnail of a gallery. It fetches the thumbnail image from an API and displays it. When clicked, it triggers a callback function with the gallery ID. -### Props - -- `id` (string): The ID of the gallery to fetch the thumbnail for. -- `onSelect` (function): A function to be called when the thumbnail is clicked. The gallery ID is passed as an argument. -- `title` (string) : The name of the gallery. -- `subscription` (subscription) : The name of the subscription required for the gallery. - -### State - -- `galleryId` (string): A state to store the gallery ID. -- `thumbnailUrl` (string): A state to store the fetched thumbnail URL. -- `isLoading` (boolean): A state to keep track of the loading status. -### Functions - -- `openGallery`: A function to call the `onSelect` prop with the gallery ID. -- `getData`: An async function to fetch the thumbnail from the API. -### Usage -This will render a thumbnail for the gallery with the ID of "1". When the thumbnail is clicked, it will log the gallery ID to the console. -```tsx - //console.log(id)} /> -```