e5cd3a154c
- Created new JavaScript files for map pin, search, and user icons. - Added index.html with basic structure and linked assets. - Included vite.svg for the favicon.
5 lines
15 KiB
JavaScript
5 lines
15 KiB
JavaScript
import{r,j as e,P as f,O as n}from"./index-mUEXKEer.js";import{S as i,C as s,A as x,U as u,V as p,T as d,Q as w,M as t,E as k,a as b}from"./NielsenHeuristics-d7HCIgJi.js";const A=()=>{const[g,j]=r.useState(""),[a,o]=r.useState("idle"),[y,m]=r.useState(0),[N,l]=r.useState(!1),v=()=>{o("loading"),m(0);const c=setInterval(()=>{m(h=>h>=100?(clearInterval(c),o("success"),setTimeout(()=>o("idle"),3e3),100):h+10)},300)};return e.jsxs("div",{className:"min-h-screen bg-background",children:[e.jsx(f,{title:"Usability Principles",description:"10 essential design principles for creating user-friendly interfaces, integrated with Adinkra symbolism and proportional typography."}),e.jsxs("section",{className:"relative bg-gradient-to-br from-brand-navy to-brand-blue-strong text-white py-16 px-8",children:[e.jsx("div",{className:"absolute top-10 right-10 opacity-10",children:e.jsx(n,{size:150,color:"white"})}),e.jsxs("div",{className:"max-w-7xl mx-auto relative z-10",children:[e.jsxs("div",{className:"flex items-center gap-4 mb-4",children:[e.jsx(n,{size:64,color:"var(--brand-orange-warm)"}),e.jsx("h1",{children:"Usability Principles"})]}),e.jsx("p",{className:"text-[length:var(--text-md)] opacity-90 max-w-3xl",children:"10 essential design principles for creating user-friendly interfaces, integrated with our Adinkra symbol system and proportional typography scaling."})]})]}),e.jsxs("div",{className:"max-w-7xl mx-auto p-8 space-y-16",children:[e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"1. Show What's Happening"}),e.jsx("p",{className:"text-muted-foreground",children:"Keep users informed with clear, timely feedback about system actions and progress"})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(i,{status:"idle",message:"System ready for action"}),e.jsx(i,{status:a,message:a==="loading"?"Processing your request...":a==="success"?"Action completed successfully!":"Ready",showProgress:a==="loading",progress:y}),e.jsx(i,{status:"warning",message:"Please review the information before proceeding",symbolName:"mpatapo"}),e.jsx(i,{status:"error",message:"Unable to connect to the server",symbolName:"fihankra"}),e.jsx(s,{onClick:v,symbolName:"nkyinkyim",disabled:a==="loading",children:"Test Loading State"})]})]}),e.jsx("div",{className:"border-t border-border"}),e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"2. Use Familiar Language"}),e.jsx("p",{className:"text-muted-foreground",children:"Speak the user's language with words and concepts they already know"})]}),e.jsxs("div",{className:"grid md:grid-cols-2 gap-6",children:[e.jsx(x,{title:"Begin Your Learning Journey",description:"Access courses, tutorials, and knowledge resources tailored to your interests.",actionLabel:"Start Learning",symbolName:"sankofa",onAction:()=>alert("Learning journey started!"),secondaryActionLabel:"Browse Catalog",onSecondaryAction:()=>alert("Browsing catalog...")}),e.jsx(x,{title:"Join Our Community",description:"Connect with like-minded individuals and collaborate on projects together.",actionLabel:"Join Now",symbolName:"nkonsonkonson",onAction:()=>alert("Welcome to the community!"),secondaryActionLabel:"Learn More",onSecondaryAction:()=>alert("Learning more...")})]})]}),e.jsx("div",{className:"border-t border-border"}),e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"3. Allow Easy Undo and Exit"}),e.jsx("p",{className:"text-muted-foreground",children:"Let users easily reverse actions or exit unwanted situations"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h6",{className:"mb-3 text-muted-foreground",children:"Safe Actions with Undo"}),e.jsx(u,{actionLabel:"Archive Item",onConfirm:()=>console.log("Item archived"),onCancel:()=>console.log("Archive cancelled"),confirmMessage:"Item archived successfully",symbolName:"fihankra",variant:"primary"})]}),e.jsxs("div",{children:[e.jsx("h6",{className:"mb-3 text-muted-foreground",children:"Destructive Actions with Confirmation"}),e.jsx(u,{actionLabel:"Delete Forever",onConfirm:()=>console.log("Item deleted"),confirmMessage:"Item deleted",showUndo:!1,symbolName:"nkyinkyim",variant:"destructive"})]})]})]}),e.jsx("div",{className:"border-t border-border"}),e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"4. Consistency and Standards"}),e.jsx("p",{className:"text-muted-foreground",children:"Follow platform conventions and maintain internal consistency"})]}),e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx("h6",{className:"mb-3 text-muted-foreground",children:"Button Variants (Consistent Styling)"}),e.jsxs("div",{className:"flex flex-wrap gap-3",children:[e.jsx(s,{variant:"primary",symbolName:"osiadan",children:"Primary"}),e.jsx(s,{variant:"secondary",symbolName:"sankofa",children:"Secondary"}),e.jsx(s,{variant:"success",symbolName:"dwennimmen",children:"Success"}),e.jsx(s,{variant:"warning",symbolName:"nkyinkyim",children:"Warning"}),e.jsx(s,{variant:"destructive",children:"Destructive"}),e.jsx(s,{variant:"ghost",symbolName:"nyansapo",children:"Ghost"})]})]}),e.jsxs("div",{children:[e.jsx("h6",{className:"mb-3 text-muted-foreground",children:"Button Sizes (Consistent Scaling)"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(s,{size:"sm",symbolName:"osiadan",children:"Small"}),e.jsx(s,{size:"md",symbolName:"osiadan",children:"Medium"}),e.jsx(s,{size:"lg",symbolName:"osiadan",children:"Large"})]})]}),e.jsxs("div",{children:[e.jsx("h6",{className:"mb-3 text-muted-foreground",children:"Loading States (Consistent Feedback)"}),e.jsxs("div",{className:"flex flex-wrap gap-3",children:[e.jsx(s,{loading:!0,variant:"primary",children:"Processing"}),e.jsx(s,{disabled:!0,variant:"secondary",children:"Disabled"})]})]})]})]}),e.jsx("div",{className:"border-t border-border"}),e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"5. Error Prevention"}),e.jsx("p",{className:"text-muted-foreground",children:"Prevent errors through good design, constraints, and confirmations"})]}),e.jsxs("div",{className:"max-w-2xl space-y-6",children:[e.jsx(p,{label:"Username",value:g,onChange:j,placeholder:"Enter your username",helpText:"Use 3-20 characters, letters and numbers only",validation:{required:!0,minLength:3,maxLength:20,pattern:/^[a-zA-Z0-9]+$/},showCharCount:!0,symbolName:"nyansapo"}),e.jsx(p,{label:"Email Address",value:"",onChange:()=>{},placeholder:"you@example.com",helpText:"We'll never share your email",validation:{required:!0,custom:c=>/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c)?null:"Please enter a valid email address"},symbolName:"nkonsonkonson"})]})]}),e.jsx("div",{className:"border-t border-border"}),e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"6. Recognition Rather Than Recall"}),e.jsx("p",{className:"text-muted-foreground",children:"Make objects, actions, and options visible with contextual help"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"flex flex-wrap gap-4",children:[e.jsx(d,{content:"Represents love and harmony",symbolName:"osiadan",children:e.jsx(s,{symbolName:"osiadan",children:"Hover for Symbol Meaning"})}),e.jsx(d,{content:"Learn from the past - Wisdom symbol",symbolName:"sankofa",position:"bottom",children:e.jsx(s,{variant:"secondary",symbolName:"sankofa",children:"Educational Resources"})}),e.jsx(d,{content:"Unity and collaboration",symbolName:"nkonsonkonson",position:"right",children:e.jsx(s,{variant:"success",symbolName:"nkonsonkonson",children:"Team Tools"})})]}),e.jsx("div",{className:"bg-card p-6 rounded-xl border border-border",children:e.jsx("p",{className:"text-muted-foreground mb-4",children:"Tooltips provide context without requiring users to remember meanings. Each Adinkra symbol includes its cultural significance and recommended usage."})})]})]}),e.jsx("div",{className:"border-t border-border"}),e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"7. Support Different Skill Levels"}),e.jsx("p",{className:"text-muted-foreground",children:"Provide shortcuts for experienced users while keeping things simple for beginners"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsx("div",{className:"flex gap-4",children:e.jsx(w,{actions:[{label:"New Document",symbolName:"sankofa",onClick:()=>alert("New document"),shortcut:"Ctrl+N",description:"Create a new document"},{label:"Save",symbolName:"fihankra",onClick:()=>alert("Saved"),shortcut:"Ctrl+S",description:"Save current work"},{label:"Search",symbolName:"nyansapo",onClick:()=>alert("Search"),shortcut:"Ctrl+F",description:"Find content"},{label:"Collaborate",symbolName:"nkonsonkonson",onClick:()=>alert("Share"),shortcut:"Ctrl+Shift+S",description:"Share with team"}]})}),e.jsx("div",{className:"bg-accent/30 p-4 rounded-lg",children:e.jsxs("p",{className:"text-sm text-muted-foreground",children:["💡 ",e.jsx("strong",{children:"Power User Tip:"})," Keyboard shortcuts are displayed in the menu and work globally. Try pressing ",e.jsx("kbd",{className:"px-2 py-1 bg-muted rounded text-xs",children:"Ctrl+S"})," anywhere on this page."]})})]})]}),e.jsx("div",{className:"border-t border-border"}),e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"8. Aesthetic and Minimalist Design"}),e.jsx("p",{className:"text-muted-foreground",children:"Remove unnecessary elements, focus on what matters"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4",children:[e.jsx(t,{title:"Active Users",value:"2,547",symbolName:"nkonsonkonson",trend:{value:12,isPositive:!0}}),e.jsx(t,{title:"Completion Rate",value:"94%",symbolName:"dwennimmen",trend:{value:3,isPositive:!0}}),e.jsx(t,{title:"Learning Hours",value:"15,234",symbolName:"sankofa",trend:{value:8,isPositive:!0}}),e.jsx(t,{title:"Response Time",value:"1.2s",symbolName:"nkyinkyim",trend:{value:5,isPositive:!1}})]})]}),e.jsx("div",{className:"border-t border-border"}),e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"9. Help Users Fix Errors"}),e.jsx("p",{className:"text-muted-foreground",children:"Explain errors clearly and offer specific solutions"})]}),e.jsxs("div",{className:"space-y-6",children:[N?e.jsx(k,{title:"Connection Failed",message:"We couldn't connect to the server. This might be due to a temporary network issue or server maintenance.",technicalDetails:`Error: ECONNREFUSED at port 443
|
|
Timestamp: 2026-02-23T10:30:45Z
|
|
Request ID: req_abc123xyz`,showTechnicalDetails:!0,onRetry:()=>{alert("Retrying..."),setTimeout(()=>l(!1),1e3)},onSupport:()=>alert("Opening support chat..."),onDismiss:()=>l(!1)}):e.jsx(s,{variant:"destructive",onClick:()=>l(!0),children:"Trigger Example Error"}),e.jsxs("div",{className:"bg-card p-6 rounded-xl border border-border",children:[e.jsx("h6",{className:"mb-3",children:"Error Message Best Practices:"}),e.jsxs("ul",{className:"space-y-2 text-sm text-muted-foreground",children:[e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx("span",{className:"text-success",children:"✓"}),e.jsx("span",{children:"Clear explanation in plain language"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx("span",{className:"text-success",children:"✓"}),e.jsx("span",{children:"Actionable recovery options"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx("span",{className:"text-success",children:"✓"}),e.jsx("span",{children:"Technical details available but hidden by default"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx("span",{className:"text-success",children:"✓"}),e.jsx("span",{children:"Visual distinction with appropriate symbolism"})]})]})]})]})]}),e.jsx("div",{className:"border-t border-border"}),e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"10. Help and Documentation"}),e.jsx("p",{className:"text-muted-foreground",children:"Provide easy-to-search documentation focused on user tasks"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsx(b,{title:"Getting Started with Adinkra Symbols",content:`Adinkra symbols are visual representations of concepts and aphorisms from West African culture.
|
|
Each symbol carries deep meaning and can enhance your designs with cultural significance.`,symbolName:"sankofa",steps:["Choose a symbol that matches your feature's purpose","Import the symbol component from AdinkraSymbols","Customize size and color to fit your design","Add appropriate ARIA labels for accessibility"],tips:["Use Osiadan as your primary brand symbol","Match symbol meanings to feature purposes"],learnMoreUrl:"/ADINKRA_QUICK_REFERENCE.md"}),e.jsx(b,{title:"Understanding Proportional Scaling",content:"Our typography and spacing systems use proportional relationships to create harmonious visual designs. This approach creates natural visual hierarchy and balanced layouts.",symbolName:"nyansapo",steps:["Base font size is 16px (1rem)","Each size relates proportionally to the base","This creates natural visual hierarchy","Spacing follows the same principle"],tips:["Use the predefined spacing scale (space-1 through space-12)","Responsive typography scales automatically","Bebas Neue for impact, Exo for readability"],learnMoreUrl:"/DESIGN_SYSTEM_GUIDE.md"})]})]}),e.jsx("section",{className:"bg-gradient-to-br from-brand-blue-strong to-brand-navy text-white p-8 rounded-2xl",children:e.jsxs("div",{className:"flex items-start gap-6",children:[e.jsx(n,{size:80,color:"var(--brand-orange-warm)",className:"flex-shrink-0"}),e.jsxs("div",{children:[e.jsx("h3",{className:"mb-4",children:"Usability Principles in Practice"}),e.jsx("p",{className:"opacity-90 mb-6",children:"These 10 principles create interfaces that are easy to use, efficient, and forgiving. By combining them with our Adinkra symbolism and proportional design guidelines, we achieve both excellent user experience and cultural depth."}),e.jsxs("div",{className:"grid md:grid-cols-2 gap-4 text-sm",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"font-[weight:var(--font-weight-semibold)]",children:"Key Benefits:"}),e.jsxs("ul",{className:"space-y-1 opacity-90",children:[e.jsx("li",{children:"• Reduced user errors"}),e.jsx("li",{children:"• Faster task completion"}),e.jsx("li",{children:"• Increased user satisfaction"}),e.jsx("li",{children:"• Better accessibility"}),e.jsx("li",{children:"• Cultural resonance"})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"font-[weight:var(--font-weight-semibold)]",children:"Components Available:"}),e.jsxs("ul",{className:"space-y-1 opacity-90",children:[e.jsx("li",{children:"• Status feedback system"}),e.jsx("li",{children:"• Undoable actions"}),e.jsx("li",{children:"• Validated inputs"}),e.jsx("li",{children:"• Contextual tooltips"}),e.jsx("li",{children:"• Error recovery flows"})]})]})]})]})]})}),e.jsxs("footer",{className:"text-center pt-8 border-t border-border",children:[e.jsx(n,{size:48,color:"var(--brand-blue-strong)",className:"mx-auto mb-4"}),e.jsx("p",{className:"text-muted-foreground text-sm",children:"LUPMIS 2.0 Design Guidelines"})]})]})]})};export{A as NielsenShowcase};
|