Snackbar

import { Snackbar } from '@smart-tv/ui';

import { useState } from 'react';
import { Snackbar, Button } from '@smart-tv/ui';

function App() {
  const [open, setOpen] = useState(false);

  const showSnackbar = () => {
    setOpen(true);
  };

  return (
    <>
      <Button focusKey="show" onEnterPress={showSnackbar}>
        Show Notification
      </Button>

      <Snackbar
        open={open}
        onClose={() => setOpen(false)}
        message="Settings saved successfully!"
      />
    </>
  );
}

// Auto-hide after 3 seconds (default)
<Snackbar
  open={open}
  onClose={handleClose}
  message="Quick notification"
  duration={3000}
/>

// Auto-hide after 5 seconds
<Snackbar
  open={open}
  onClose={handleClose}
  message="Longer notification"
  duration={5000}
/>

// Don't auto-hide (null duration)
<Snackbar
  open={open}
  onClose={handleClose}
  message="Stays until manually closed"
  duration={null}
/>

// Bottom center (default)
<Snackbar
  open={open}
  placement="bottom-center"
  message="Bottom center notification"
/>

// Bottom left
<Snackbar
  open={open}
  placement="bottom-left"
  message="Bottom left notification"
/>

// Bottom right
<Snackbar
  open={open}
  placement="bottom-right"
  message="Bottom right notification"
/>

// Top positions
<Snackbar
  open={open}
  placement="top-center"
  message="Top center notification"
/>

<Snackbar
  open={open}
  placement="top-left"
  message="Top left notification"
/>

<Snackbar
  open={open}
  placement="top-right"
  message="Top right notification"
/>

<Snackbar
  open={open}
  onClose={handleClose}
  message="Item deleted"
  action={{
    label: "Undo",
    onClick: handleUndo,
    focusKey: "undo-action"
  }}
/>

// Action with custom styling
<Snackbar
  open={open}
  onClose={handleClose}
  message="Download complete"
  action={{
    label: "Open",
    onClick: handleOpen,
    focusKey: "open-action",
    className: "text-blue-400 font-semibold"
  }}
/>

<Snackbar
  open={open}
  onClose={handleClose}
  message="Pauses on interaction"
  duration={5000}
  pauseOnHover={true}
  action={{
    label: "Retry",
    onClick: handleRetry,
    focusKey: "retry-btn"
  }}
/>

// Success message
<Snackbar
  open={open}
  message="Action completed successfully!"
  variant="success"
  className="bg-green-600 text-white"
/>

// Error message
<Snackbar
  open={open}
  message="Something went wrong"
  variant="error"
  className="bg-red-600 text-white"
/>

// Warning message
<Snackbar
  open={open}
  message="Please check your connection"
  variant="warning"
  className="bg-amber-600 text-white"
/>

// Info message
<Snackbar
  open={open}
  message="New features available"
  variant="info"
  className="bg-blue-600 text-white"
/>

import { useState } from 'react';

function App() {
  const [snackbars, setSnackbars] = useState<Array<{
    id: number;
    message: string;
    open: boolean;
  }>>([]);

  const showSnackbar = (message: string) => {
    const id = Date.now();
    setSnackbars(prev => [...prev, { id, message, open: true }]);
  };

  const closeSnackbar = (id: number) => {
    setSnackbars(prev =>
      prev.map(s => s.id === id ? { ...s, open: false } : s)
    );
    // Remove after animation
    setTimeout(() => {
      setSnackbars(prev => prev.filter(s => s.id !== id));
    }, 300);
  };

  return (
    <>
      <Button onEnterPress={() => showSnackbar('First notification')}>
        Show Notification
      </Button>

      {snackbars.map((snackbar, index) => (
        <Snackbar
          key={snackbar.id}
          open={snackbar.open}
          message={snackbar.message}
          onClose={() => closeSnackbar(snackbar.id)}
          style={{ bottom: `${(index * 70) + 20}px` }}
        />
      ))}
    </>
  );
}