leumas-private-shared/src/Components/Gallery/GalleryConfig.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

export const GalleryConfig = [
    {
      src: "https://via.placeholder.com/150",
      category: "Shoes",
      title: "Sneakers",
      description: "High-quality sneakers for everyday wear.",
      link: "https://example.com/page1",
    },
    {
      src: "https://via.placeholder.com/150",
      category: "Bags",
      title: "Backpack",
      description: "Durable backpack for all your travel needs.",
      link: "https://example.com/page2",
    },
    {
        src: "https://via.placeholder.com/150",
        category: "Bags",
        title: "Backpack",
        description: "Durable backpack for all your travel needs.",
        link: "https://example.com/page2",
      },
      {
        src: "https://via.placeholder.com/150",
        category: "Bags",
        title: "Backpack",
        description: "Durable backpack for all your travel needs.",
        link: "https://example.com/page2",
      },
      {
        src: "https://via.placeholder.com/150",
        category: "Bags",
        title: "Backpack",
        description: "Durable backpack for all your travel needs.",
        link: "https://example.com/page2",
      },
      {
        src: "https://via.placeholder.com/150",
        category: "Bags",
        title: "Backpack",
        description: "Durable backpack for all your travel needs.",
        link: "https://example.com/page2",
      },
      {
        src: "https://via.placeholder.com/150",
        category: "Bags",
        title: "Backpack",
        description: "Durable backpack for all your travel needs.",
        link: "https://example.com/page2",
      },
      {
        src: "https://via.placeholder.com/150",
        category: "Bags",
        title: "Backpack",
        description: "Durable backpack for all your travel needs.",
        link: "https://example.com/page2",
      },
    // Add more images with categories, titles, descriptions, and links as needed
  ];
  

//   RULES
/**
 * Gallery Configuration Rules
 * ---------------------------
 * 1. Ensure Tailwind CSS is set up in your project as this configuration 
 *    relies on Tailwind CSS for styling.
 * 
 * 2. Each gallery item must include:
 *    - `src`: The URL of the image. This is required.
 *    - `category`: A category for the image. This is used for filtering and is required.
 *    - `title`: A title for the image. This must be a maximum of 12 characters.
 *    - `description`: A description of the image. This must be no more than 10 words. 
 *      Aim for brevity for better readability.
 *    - `link`: An optional URL that the image should link to when clicked. If not provided, 
 *      the image won't be wrapped in a link element.
 * 
 * 3. Links are optional. If you choose to provide a link, ensure it's a valid URL that 
 *    users can safely navigate to.
 * 
 * 4. Titles are required for each item and must not exceed 12 characters. This limit 
 *    helps maintain a clean and uniform presentation across all items.
 * 
 * 5. Descriptions must be concise, not exceeding 10 words. Short and informative 
 *    descriptions contribute to a better user experience.
 * 
 * 6. Every item must belong to a category. Categories are essential for the filtering 
 *    functionality within the gallery. Ensure consistency in category names for 
 *    accurate filtering.
 * 
 * Example Configuration:
 */