Apoorva - mastodon autoposter

src/components/Announcements/CharacterCounter.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+const CharacterCounter = ({ currentLength, maxLength }) => {
+  const isOverLimit = currentLength > maxLength;
+  const percentage = (currentLength / maxLength) * 100;
+
+  const getColor = () => {
+    if (isOverLimit) return '#dc3545'; // Red
+    if (percentage > 90) return '#ffc107'; // Yellow/warning
+    return '#28a745'; // Green
+  };
+
+  return (
+    <div
+      style={{
+        fontSize: '14px',
+        fontWeight: '500',
+        marginTop: '8px',
+        color: getColor(),
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px',
+      }}
+    >
+      <span style={{ fontWeight: '700', fontSize: '16px' }}>{currentLength}</span>
+      <span>/</span>
+      <span>{maxLength}</span>
+      {isOverLimit && (
+        <span style={{ marginLeft: '8px', fontSize: '12px', fontWeight: '600' }}>
+          ⚠️ Exceeds limit by {currentLength - maxLength} characters!
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default CharacterCounter;

src/components/Announcements/ConfirmationModal.jsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+
+const ConfirmationModal = ({
+  isOpen,
+  toggle,
+  onConfirm,
+  title = 'Confirm Action',
+  message = 'Are you sure you want to proceed?',
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  confirmColor = 'primary',
+  showDontShowAgain = false,
+  onDontShowAgainChange = null,
+}) => {
+  const [dontShowAgain, setDontShowAgain] = useState(false);
+
+  const handleConfirm = () => {
+    if (showDontShowAgain && dontShowAgain && onDontShowAgainChange) {
+      onDontShowAgainChange(true);
+    }
+    onConfirm();
+    toggle();
+    setDontShowAgain(false); // Reset for next time
+  };
+
+  const handleCancel = () => {
+    toggle();
+    setDontShowAgain(false); // Reset checkbox
+  };
+
+  return (
+    <Modal isOpen={isOpen} toggle={handleCancel} centered>
+      <ModalHeader toggle={handleCancel}>{title}</ModalHeader>
+      <ModalBody>
+        <p style={{ margin: 0, marginBottom: showDontShowAgain ? '1rem' : 0 }}>{message}</p>
+        {showDontShowAgain && (
+          <div style={{ marginTop: '1rem' }}>
+            <label
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.5rem',
+                cursor: 'pointer',
+                userSelect: 'none',
+              }}
+            >
+              <input
+                type="checkbox"
+                checked={dontShowAgain}
+                onChange={e => setDontShowAgain(e.target.checked)}
+                style={{ cursor: 'pointer', width: '16px', height: '16px' }}
+              />
+              <span style={{ fontSize: '0.9rem', color: '#666' }}>Don&apos;t show this again</span>
+            </label>
+          </div>
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button color="secondary" onClick={handleCancel}>
+          {cancelText}
+        </Button>
+        <Button color={confirmColor} onClick={handleConfirm}>
+          {confirmText}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default ConfirmationModal;