@orhancodestudio/ocsm-core 0.1.0-alpha.1

package/src/admin/components/icons.tsx

@@ -0,0 +1,150 @@
+import type { SVGProps } from "react";
+
+type IconProps = SVGProps<SVGSVGElement>;
+
+function Base({ children, ...props }: IconProps & { children: React.ReactNode }) {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...props}
+    >
+      {children}
+    </svg>
+  );
+}
+
+export const IconDashboard = (props: IconProps) => (
+  <Base {...props}>
+    <rect x="3" y="3" width="7" height="9" />
+    <rect x="14" y="3" width="7" height="5" />
+    <rect x="14" y="12" width="7" height="9" />
+    <rect x="3" y="16" width="7" height="5" />
+  </Base>
+);
+
+export const IconDocument = (props: IconProps) => (
+  <Base {...props}>
+    <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+    <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z" />
+    <path d="M9 9h1M9 13h6M9 17h6" />
+  </Base>
+);
+
+export const IconUsers = (props: IconProps) => (
+  <Base {...props}>
+    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+    <circle cx="9" cy="7" r="4" />
+    <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
+  </Base>
+);
+
+export const IconTheme = (props: IconProps) => (
+  <Base {...props}>
+    <circle cx="13.5" cy="6.5" r="2.5" />
+    <circle cx="17.5" cy="10.5" r="2.5" />
+    <circle cx="8.5" cy="7.5" r="2.5" />
+    <circle cx="6.5" cy="12.5" r="2.5" />
+    <path d="M12 2a10 10 0 1 0 0 20 2 2 0 0 0 2-2 2 2 0 0 1 2-2h1a4 4 0 0 0 4-4 8 8 0 0 0-9-10z" />
+  </Base>
+);
+
+export const IconSystem = (props: IconProps) => (
+  <Base {...props}>
+    <path d="M12 2a3 3 0 0 0-3 3v1.5a6 6 0 0 0-1.3.76l-1.3-.75a3 3 0 1 0-3 5.2l1.3.75a6 6 0 0 0 0 1.5l-1.3.75a3 3 0 1 0 3 5.2l1.3-.75a6 6 0 0 0 1.3.76V21a3 3 0 0 0 6 0v-1.5a6 6 0 0 0 1.3-.76l1.3.75a3 3 0 1 0 3-5.2l-1.3-.75a6 6 0 0 0 0-1.5l1.3-.75a3 3 0 1 0-3-5.2l-1.3.75a6 6 0 0 0-1.3-.76V5a3 3 0 0 0-3-3z" />
+    <circle cx="12" cy="12" r="2.5" />
+  </Base>
+);
+
+export const IconInfo = (props: IconProps) => (
+  <Base {...props}>
+    <circle cx="12" cy="12" r="9" />
+    <path d="M12 16v-4M12 8h.01" />
+  </Base>
+);
+
+export const IconSettings = (props: IconProps) => (
+  <Base {...props}>
+    <circle cx="12" cy="12" r="3" />
+    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+  </Base>
+);
+
+export const IconPencil = (props: IconProps) => (
+  <Base {...props}>
+    <path d="M12 20h9" />
+    <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z" />
+  </Base>
+);
+
+export const IconPlus = (props: IconProps) => (
+  <Base {...props}>
+    <path d="M12 5v14M5 12h14" />
+  </Base>
+);
+
+export const IconTrash = (props: IconProps) => (
+  <Base {...props}>
+    <path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+  </Base>
+);
+
+export const IconLogout = (props: IconProps) => (
+  <Base {...props}>
+    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" />
+  </Base>
+);
+
+export const IconGrip = (props: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+    {...props}
+  >
+    <circle cx="9" cy="5" r="1.6" />
+    <circle cx="15" cy="5" r="1.6" />
+    <circle cx="9" cy="12" r="1.6" />
+    <circle cx="15" cy="12" r="1.6" />
+    <circle cx="9" cy="19" r="1.6" />
+    <circle cx="15" cy="19" r="1.6" />
+  </svg>
+);
+
+export const IconMonitor = (props: IconProps) => (
+  <Base {...props}>
+    <rect x="2" y="3" width="20" height="14" rx="2" />
+    <path d="M8 21h8M12 17v4" />
+  </Base>
+);
+
+export const IconPhone = (props: IconProps) => (
+  <Base {...props}>
+    <rect x="7" y="2" width="10" height="20" rx="2" />
+    <path d="M11 18h2" />
+  </Base>
+);
+
+export const IconEye = (props: IconProps) => (
+  <Base {...props}>
+    <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
+    <circle cx="12" cy="12" r="3" />
+  </Base>
+);
+
+export const IconEyeOff = (props: IconProps) => (
+  <Base {...props}>
+    <path d="M9.9 4.2A10.9 10.9 0 0 1 12 4c6.5 0 10 7 10 7a18.5 18.5 0 0 1-3 3.9M6.1 6.1C3.5 7.8 2 11 2 11s3.5 7 10 7a10.9 10.9 0 0 0 4-.8" />
+    <path d="M9.5 9.5a3 3 0 0 0 4.2 4.2" />
+    <path d="M3 3l18 18" />
+  </Base>
+);

package/src/admin/components/modal.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { type ReactNode, useEffect } from "react";
+import styles from "../admin.module.css";
+
+export interface ModalProps {
+  open: boolean;
+  title: ReactNode;
+  onClose: () => void;
+  children: ReactNode;
+  /** Optional footer (e.g. action buttons), pinned to the bottom. */
+  footer?: ReactNode;
+  /** Max width of the dialog in px. */
+  width?: number;
+}
+
+/**
+ * Reusable modal dialog: dimmed overlay, centered card, ESC + backdrop-click to
+ * close, scroll-locked body. Use anywhere the panel needs a dialog.
+ */
+export function Modal({
+  open,
+  title,
+  onClose,
+  children,
+  footer,
+  width = 520,
+}: ModalProps) {
+  useEffect(() => {
+    if (!open) return;
+    function onKey(event: KeyboardEvent) {
+      if (event.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className={styles.modalOverlay}
+      onClick={onClose}
+      onKeyDown={(event) => {
+        if (event.key === "Escape") onClose();
+      }}
+      role="presentation"
+    >
+      <div
+        className={styles.modalCard}
+        style={{ maxWidth: width }}
+        role="dialog"
+        aria-modal="true"
+        onClick={(event) => event.stopPropagation()}
+        onKeyDown={(event) => event.stopPropagation()}
+      >
+        <div className={styles.modalHeader}>
+          <h2 className={styles.modalTitle}>{title}</h2>
+          <button
+            type="button"
+            className={styles.modalClose}
+            onClick={onClose}
+            aria-label="Kapat"
+          >
+            ✕
+          </button>
+        </div>
+        <div className={styles.modalBody}>{children}</div>
+        {footer ? <div className={styles.modalFooter}>{footer}</div> : null}
+      </div>
+    </div>
+  );
+}