FloatingDock

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface FloatingDockProps {
  icons: { id: number; src: string; }[];
}

class FloatingDock extends React.Component<FloatingDockProps, {}> {
  constructor(props: FloatingDockProps) {
    super(props);
  }

  render() {
    return (
      <div style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        width: '100%',
        backgroundColor: '#0A0A0A',
        padding: 10,
        display: 'flex',
        justifyContent: 'space-around',
        alignItems: 'center',
        zIndex: 1,
      }}>
        {this.props.icons.map((icon) => (
          <div
            key={icon.id}
            style={{
              width: 50,
              height: 50,
              borderRadius: '50%',
              backgroundColor: '#C9A84C',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              cursor: 'pointer',
              margin: 10,
            }}
          >
            <img src={icon.src} alt='' style={{ width: 30, height: 30 }} />
          </div>
        ))}
      </div>
    );
  }
}

export default FloatingDock;

Component info

Dependencies

About

A macOS-style floating dock that magnifies on hover, featuring gold icons on a dark background. This component is built with React and TypeScript, ensuring a seamless and efficient user experience. With its sleek design and interactive functionality, the FloatingDock component is perfect for adding a touch of elegance to any web application. The dock's magnification effect is smoothly animated, providing a intuitive and immersive experience for users. The gold icons add a hint of sophistication, making this component ideal for applications that require a high level of visual appeal. Whether you're building a desktop application or a web-based interface, the FloatingDock component is a great choice for anyone looking to create a stunning and interactive user interface. The component's dark background and gold accents create a visually striking contrast, making it perfect for applications that require a high level of visual appeal. The FloatingDock component is also highly customizable, allowing developers to easily modify its appearance and behavior to suit their specific needs. With its robust features and sleek design, the FloatingDock component is a valuable addition to any web development project.