@snapdragonsnursery/react-components 1.0.9 → 1.0.11

package/README.md

@@ -6,6 +6,8 @@ Reusable React components for Snapdragons projects.
 
 - **AuthButtons**: Profile button with authentication, user image, dropdown menu (sign out, dark mode), and login/logout handling for MSAL (Azure AD).
 - **ThemeToggle**: Simple theme (light/dark/system) toggle button.
+- **LandingPage**: Professional landing page component for Microsoft authentication flows with customizable branding.
+- **ChildSearchModal**: Modal component for searching and selecting children with advanced filtering and selection capabilities.
 
 ## Installation
 
@@ -451,6 +453,55 @@ Once setup is complete, the AuthButtons component will:
 - Provide a dropdown menu with theme toggle and logout option
 - Handle all authentication flows automatically
 
+## LandingPage Component
+
+The LandingPage component provides a professional landing page for Microsoft authentication flows.
+
+### Quick Start
+
+```jsx
+import { LandingPage } from '@snapdragonsnursery/react-components';
+
+function App() {
+  const handleSignIn = () => {
+    // Implement your Microsoft authentication logic
+    console.log('Sign in clicked');
+  };
+
+  return (
+    <LandingPage
+      logoUrl="https://your-logo-url.png"
+      appName="Your Application"
+      appDescription="Manage your application efficiently"
+      onSignIn={handleSignIn}
+      companyName="Your Company"
+    />
+  );
+}
+```
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `logoUrl` | `string` | ✅ | - | URL to your company logo |
+| `appName` | `string` | ✅ | - | Name of your application |
+| `appDescription` | `string` | ❌ | "Manage your application efficiently" | App description |
+| `onSignIn` | `function` | ❌ | `() => console.log('Sign in clicked')` | Sign-in callback |
+| `companyName` | `string` | ❌ | "Your Company" | Company name for footer |
+| `backgroundColor` | `string` | ❌ | Blue gradient | CSS background value |
+| `cardClassName` | `string` | ❌ | `""` | Additional CSS classes |
+
+### Features
+
+- **Framework Agnostic**: Uses inline styles for maximum compatibility
+- **Responsive Design**: Works on all device sizes
+- **Microsoft Integration**: Official Microsoft logo and branding
+- **Customizable**: Configurable logo, colors, and branding
+- **Accessible**: Proper semantic HTML and keyboard navigation
+
+For detailed documentation, see [LANDING_PAGE_DOCUMENTATION.md](./LANDING_PAGE_DOCUMENTATION.md).
+
 ## Troubleshooting
 
 ### Common Issues

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/LandingPage.jsx

@@ -2,7 +2,7 @@
 //
 // A reusable landing page component for Microsoft authentication
 // Designed to work across different applications with customizable branding
-// Compatible with shadcn/ui styling system
+// Uses inline styles and basic CSS for maximum compatibility
 //
 // Example usage:
 // import LandingPage from './LandingPage';
@@ -31,7 +31,7 @@ const LandingPage = ({
   appDescription = "Manage your application efficiently",
   onSignIn,
   companyName = "Your Company",
-  backgroundColor = "bg-gradient-to-br from-blue-50 to-indigo-100",
+  backgroundColor = "linear-gradient(135deg, #EBF4FF 0%, #E6E6FA 100%)",
   cardClassName = ""
 }) => {
   const handleSignInClick = () => {
@@ -42,34 +42,118 @@ const LandingPage = ({
     }
   };
 
+  const styles = {
+    container: {
+      minHeight: '100vh',
+      background: backgroundColor,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '1rem'
+    },
+    card: {
+      maxWidth: '28rem',
+      width: '100%',
+      backgroundColor: 'white',
+      borderRadius: '1rem',
+      boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+      padding: '2rem',
+      border: '1px solid #e5e7eb'
+    },
+    logoSection: {
+      textAlign: 'center',
+      marginBottom: '2rem'
+    },
+    logo: {
+      height: '4rem',
+      margin: '0 auto 1rem auto'
+    },
+    title: {
+      fontSize: '1.5rem',
+      fontWeight: 'bold',
+      color: '#111827',
+      marginBottom: '0.5rem'
+    },
+    description: {
+      color: '#6b7280'
+    },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1.5rem'
+    },
+    welcomeSection: {
+      textAlign: 'center'
+    },
+    icon: {
+      height: '3rem',
+      width: '3rem',
+      color: '#2563eb',
+      margin: '0 auto 1rem auto'
+    },
+    welcomeTitle: {
+      fontSize: '1.25rem',
+      fontWeight: '600',
+      color: '#111827',
+      marginBottom: '0.5rem'
+    },
+    welcomeText: {
+      fontSize: '0.875rem',
+      color: '#6b7280'
+    },
+    button: {
+      width: '100%',
+      backgroundColor: '#2563eb',
+      color: 'white',
+      fontWeight: '500',
+      padding: '0.75rem 1rem',
+      borderRadius: '0.5rem',
+      border: 'none',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '0.5rem',
+      transition: 'background-color 0.2s'
+    },
+    buttonHover: {
+      backgroundColor: '#1d4ed8'
+    },
+    footer: {
+      textAlign: 'center',
+      fontSize: '0.75rem',
+      color: '#6b7280'
+    }
+  };
+
   return (
-    <div className={`min-h-screen ${backgroundColor} flex items-center justify-center p-4`}>
-      <div className={`max-w-md w-full bg-card text-card-foreground rounded-2xl shadow-xl p-8 border ${cardClassName}`}>
+    <div style={styles.container}>
+      <div style={styles.card} className={cardClassName}>
         {/* Logo Section */}
-        <div className="text-center mb-8">
+        <div style={styles.logoSection}>
           <img 
             src={logoUrl}
             alt={`${companyName} Logo`}
-            className="h-16 mx-auto mb-4"
+            style={styles.logo}
           />
-          <h1 className="text-2xl font-bold text-foreground mb-2">
+          <h1 style={styles.title}>
             {appName}
           </h1>
-          <p className="text-muted-foreground">
+          <p style={styles.description}>
             {appDescription}
           </p>
         </div>
 
         {/* Sign In Section */}
-        <div className="space-y-6">
-          <div className="text-center">
-            <svg className="h-12 w-12 text-primary mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div style={styles.content}>
+          <div style={styles.welcomeSection}>
+            <svg style={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
             </svg>
-            <h2 className="text-xl font-semibold text-foreground mb-2">
+            <h2 style={styles.welcomeTitle}>
               Welcome Back
             </h2>
-            <p className="text-sm text-muted-foreground">
+            <p style={styles.welcomeText}>
               Sign in with your Microsoft account to access the system
             </p>
           </div>
@@ -77,10 +161,16 @@ const LandingPage = ({
           {/* Microsoft Sign In Button */}
           <button
             onClick={handleSignInClick}
-            className="w-full bg-primary text-primary-foreground hover:bg-primary/90 font-medium py-3 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center space-x-2"
+            style={styles.button}
+            onMouseEnter={(e) => {
+              e.target.style.backgroundColor = styles.buttonHover.backgroundColor;
+            }}
+            onMouseLeave={(e) => {
+              e.target.style.backgroundColor = styles.button.backgroundColor;
+            }}
           >
             {/* Official Microsoft logo SVG */}
-            <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg style={{width: '1.25rem', height: '1.25rem'}} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <rect x="2" y="2" width="9" height="9" fill="#F35325"/>
               <rect x="13" y="2" width="9" height="9" fill="#81BC06"/>
               <rect x="2" y="13" width="9" height="9" fill="#05A6F0"/>
@@ -90,7 +180,7 @@ const LandingPage = ({
           </button>
 
           {/* Additional Info */}
-          <div className="text-center text-xs text-muted-foreground">
+          <div style={styles.footer}>
             <p>This application is for {companyName} employees only</p>
           </div>
         </div>