QuickView

import React from 'react';
import '@cometchat/uikit-elements'; //import the web component package.
import { QuickViewStyle } from '@cometchat/uikit-elements'

function App() {
  // Define the styles
  const quickViewStyle = new QuickViewStyle({
    height: "500px",
    width: "300px",
    background: "blue",
    titleFont: '600 13px Inter, sans-serif',
    titleColor: 'white',
    subtitleFont: '400 13px Inter, sans-serif',
    subtitleColor: 'lightgrey',
    closeIconTint: 'white',
    leadingBarTint: 'white',
    leadingBarWidth: '4px',
  });

  // Define the event handler
  const handleQuickViewClose = () => {
    console.log('Close button clicked');
  }

  return (
    <div className="App">
      <cometchat-quick-view 
        title="My Title" 
        subtitle="My Subtitle" 
        hideCloseIcon="false"
        quickViewStyle=${quickViewStyle}
        @cc-close-clicked=${handleQuickViewClose}
      ></cometchat-quick-view>
    </div>
  );
}

export default App;