Honeycombs

//Fetch Images
import fs from 'fs';
import path from 'path';

export default function handler(req, res) {
  const folderPath = path.join(process.cwd(), 'public/images/');

  try {
    const files = fs.readdirSync(folderPath);
    const fileData = files.map((fileName) => {
      const filePath = `/images/${fileName}`;
      const alt = path.parse(fileName).name; // Get the filename without extension
      return { imageUrl: filePath, alt };
    });
    res.status(200).json(fileData);
  } catch (error) {file
    console.error(error);
    res.status(500).json({ error: 'An error occurred while reading files.' });
  }
}
//Honeycomb builder
import React, {useEffect , useState} from 'react';
import Image from 'next/image';
import { getColorSimple } from './layouts/stackColor';
const Honeycomb = ({ imageUrl, alt, width, height ,maxWidth}) => {
    const [HexColor, setHexColor] = useState('');

    useEffect(() => {
      // Call the function with the image path and handle the Promise
      getColorSimple(imageUrl)
        .then((result) => {
          const hexColor = result.rgb;
          setHexColor(hexColor);
        })
        .catch((error) => {
          console.error('Error:', error);
        });
    }, []);
  const hexagonStyles = {
    hexagon: {
      width: width,
      maxWidth: maxWidth,
      height: height,
      position: 'relative',
      margin: '0 10px',
      padding:'1.2%',
      clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)',
      display: 'flex',
      alignItems: 'center', // Center vertically
      justifyContent: 'center', // Center horizontally
      backgroundColor: HexColor,
      objectFit: 'contain'
    }
  };
  // Conditionally apply the 'javascript' class if 'alt' has a specific value

    return (

        <Image src={imageUrl} alt={alt} width={100} height={100} style={hexagonStyles.hexagon}/>

    );
};

export default Honeycomb;

//Honeycomb pattern
import React from 'react';
import Honeycomb from '../honeycomb';

const HoneycombGrid = ({maxHeight, evenRows, oddRows, paddingVal}) => {
  const gridStyles = {
    display: 'grid',
    justifyContent: 'center',
  };
  var paddingVar = paddingVal + '%';
  const [honeycombs, setFileData] = React.useState([]);

  React.useEffect(() => {
    fetch('/api/stack')
      .then((response) => response.json())
      .then((data) => setFileData(data))
      .catch((error) => console.error(error));
  }, []);

var hexagonsPerRow = evenRows;
const rows = [];
for (let i = 0; i < honeycombs.length; i += hexagonsPerRow) {
  hexagonsPerRow = i % (evenRows + oddRows) === 0 ? evenRows : oddRows;
  const rowHoneycombs =
    i === 0
      ? honeycombs
.slice(i, i + hexagonsPerRow)
      : i % (hexagonsPerRow * 2) === 0
      ? honeycombs.slice(i - 1, i + hexagonsPerRow)
      : honeycombs.slice(i, i + hexagonsPerRow);
  const rowStyles =
    hexagonsPerRow - rowHoneycombs.length > 0
      ?
      rowHoneycombs.length % 2 === 0 ?
      //Alignment For Stragglers Based On Size (Even Or Odd)
      {
        maxHeight: maxHeight,
        display: 'flex',
        justifyContent: 'center',
        paddingRight: paddingVar,
      } :
      {
        maxHeight: maxHeight,
        display: 'flex',
        justifyContent: 'center',
        paddingRight: paddingVar,
      }
      :
      //Natural Alignment Through Flex Center
      {
        maxHeight: maxHeight,
        display: 'flex',
        justifyContent: 'center'
      }
    rows.push(
      <div key={`row-${i}`} style={rowStyles}>
        {rowHoneycombs.map((honeycomb, index) => (
          <Honeycomb
            key={index}
            imageUrl={honeycomb.imageUrl}
            alt={honeycomb.alt}
            width={'auto'}
            height={'100%'}
            maxWidth={maxHeight}
          />
          ))}
      </div>
    );
  }
  return <div style={gridStyles}>{rows}</div>;
};

export default HoneycombGrid;