feat: unify tenant admin ui and add photo moderation

resources/js/admin/components/tenant/section-card.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface SectionCardProps extends React.HTMLAttributes<HTMLElement> {
+  as?: 'section' | 'div';
+}
+
+export function SectionCard({ className, as: Tag = 'section', ...props }: SectionCardProps) {
+  return (
+    <Tag
+      className={cn(
+        'rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-white/5 dark:shadow-inner',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+interface SectionHeaderProps {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  endSlot?: React.ReactNode;
+  className?: string;
+}
+
+export function SectionHeader({ eyebrow, title, description, endSlot, className }: SectionHeaderProps) {
+  return (
+    <div className={cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between', className)}>
+      <div>
+        {eyebrow ? (
+          <p className="text-xs font-semibold uppercase tracking-[0.35em] text-rose-500 dark:text-rose-200">{eyebrow}</p>
+        ) : null}
+        <h2 className="text-lg font-semibold text-slate-900 dark:text-white">{title}</h2>
+        {description ? <p className="text-sm text-slate-600 dark:text-slate-300">{description}</p> : null}
+      </div>
+      {endSlot}
+    </div>
+  );
+}