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.
2 lines
17 KiB
JavaScript
2 lines
17 KiB
JavaScript
import{A as c,j as e,P as N,O as y}from"./index-mUEXKEer.js";const b=({title:r,subtitle:s,symbolName:n="osiadan",symbolSize:o=48,symbolColor:a="var(--brand-blue-strong)",className:i=""})=>{const l=c[n].component;return e.jsxs("div",{className:`flex items-center gap-4 ${i}`,children:[e.jsx(l,{size:o,color:a}),e.jsxs("div",{children:[e.jsx("h2",{children:r}),s&&e.jsx("p",{className:"text-muted-foreground text-[length:var(--text-sm)]",children:s})]})]})},j=({title:r,subtitle:s,symbolName:n="osiadan",symbolColor:o="var(--brand-blue-strong)",backgroundColor:a="var(--card)",textColor:i="var(--card-foreground)",onClick:l,className:d=""})=>{const t=c[n].component,x=c[n];return e.jsxs("div",{onClick:l,className:`p-6 rounded-xl border border-border transition-all ${l?"cursor-pointer hover:shadow-lg hover:scale-105":""} ${d}`,style:{backgroundColor:a,color:i},children:[e.jsxs("div",{className:"flex items-start gap-4 mb-4",children:[e.jsx(t,{size:48,color:o}),e.jsxs("div",{className:"flex-1",children:[e.jsx("h3",{className:"text-[length:var(--text-lg)] mb-1",children:r}),e.jsx("p",{className:"text-xs text-muted-foreground italic",children:x.meaning})]})]}),e.jsx("p",{className:"text-muted-foreground",children:s})]})},f=({title:r,subtitle:s,description:n,symbolName:o="osiadan",backgroundColor:a="var(--brand-navy)",textColor:i="white",accentColor:l="var(--brand-blue-light)",children:d,className:t=""})=>{const x=c[o].component;return e.jsxs("section",{className:`relative py-20 px-8 overflow-hidden ${t}`,style:{backgroundColor:a,color:i},children:[e.jsx("div",{className:"absolute top-10 right-10 opacity-10",children:e.jsx(x,{size:200,color:i})}),e.jsx("div",{className:"absolute bottom-10 left-10 opacity-10",children:e.jsx(x,{size:150,color:i})}),e.jsx("div",{className:"max-w-7xl mx-auto relative z-10",children:e.jsxs("div",{className:"flex flex-col md:flex-row items-center justify-between gap-8",children:[e.jsxs("div",{className:"flex-1 space-y-6",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(x,{size:80,color:l}),e.jsxs("div",{children:[e.jsx("h1",{children:r}),e.jsx("p",{className:"text-[length:var(--text-md)] font-[family:var(--font-body)] uppercase tracking-wider mt-2",style:{color:l},children:s}),e.jsx("p",{className:"text-muted-foreground",children:n})]})]}),d]}),e.jsx("div",{className:"flex-shrink-0",children:e.jsx(x,{size:120,color:l})})]})})]})},p=({children:r,symbolName:s,symbolPosition:n="left",variant:o="primary",onClick:a,className:i="",disabled:l=!1})=>{const d=c[s].component,t={primary:"bg-primary text-primary-foreground hover:bg-primary-hover",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary-hover",success:"bg-success text-success-foreground hover:opacity-90",warning:"bg-warning text-warning-foreground hover:opacity-90",destructive:"bg-destructive text-destructive-foreground hover:opacity-90"};return e.jsxs("button",{onClick:a,disabled:l,className:`px-6 py-3 rounded-lg transition-all flex items-center gap-2 ${t[o]} ${l?"opacity-50 cursor-not-allowed":""} ${i}`,children:[n==="left"&&e.jsx(d,{size:24,color:"currentColor"}),e.jsx("span",{children:r}),n==="right"&&e.jsx(d,{size:24,color:"currentColor"})]})},w=({symbolName:r="osiadan",size:s=64,color:n="var(--brand-blue-strong)",message:o,className:a=""})=>{const i=c[r].component;return e.jsxs("div",{className:`flex flex-col items-center justify-center gap-4 ${a}`,children:[e.jsx(i,{size:s,color:n,className:"animate-pulse"}),o&&e.jsx("p",{className:"text-muted-foreground text-sm",children:o})]})},g=({label:r,symbolName:s,variant:n="default",size:o="md",className:a=""})=>{const i=c[s].component,l={default:"bg-muted text-foreground",success:"bg-success text-success-foreground",warning:"bg-warning text-warning-foreground",info:"bg-primary text-primary-foreground"},t={sm:{padding:"px-2 py-1",symbol:16,text:"text-xs"},md:{padding:"px-3 py-1.5",symbol:20,text:"text-sm"},lg:{padding:"px-4 py-2",symbol:24,text:"text-base"}}[o];return e.jsxs("div",{className:`inline-flex items-center gap-2 rounded-full ${t.padding} ${l[n]} ${a}`,children:[e.jsx(i,{size:t.symbol,color:"currentColor"}),e.jsx("span",{className:`font-[weight:var(--font-weight-medium)] ${t.text}`,children:r})]})},k=({items:r,columns:s=3,className:n=""})=>{const o={2:"grid-cols-2",3:"grid-cols-3",4:"grid-cols-4",5:"grid-cols-5"};return e.jsx("div",{className:`grid ${o[s]} gap-4 ${n}`,children:r.map((a,i)=>{const l=c[a.symbolName].component,d=c[a.symbolName],t=()=>{a.onClick&&a.onClick(),a.href&&(window.location.href=a.href)};return e.jsxs("button",{onClick:t,className:"p-6 bg-card hover:bg-accent rounded-xl transition-all hover:scale-105 border border-border group",children:[e.jsx(l,{size:48,color:a.color||"var(--brand-blue-strong)",className:"mx-auto mb-3 group-hover:scale-110 transition-transform"}),e.jsx("p",{className:"font-[weight:var(--font-weight-semibold)] text-sm mb-1",children:a.label}),e.jsx("p",{className:"text-sm text-muted-foreground",children:d.meaning})]},i)})})},v=({title:r,description:s,symbolName:n,gradientFrom:o,gradientTo:a,textColor:i="white",accentColor:l="var(--brand-orange-warm)",onClick:d,className:t=""})=>{const x=c[n].component;return e.jsxs("div",{onClick:d,className:`relative p-8 rounded-2xl overflow-hidden ${d?"cursor-pointer hover:scale-105":""} transition-transform ${t}`,style:{background:`linear-gradient(135deg, ${o}, ${a})`,color:i},children:[e.jsx("div",{className:"absolute top-4 right-4 opacity-20",children:e.jsx(x,{size:120,color:i})}),e.jsxs("div",{className:"relative z-10 space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(x,{size:40,color:l}),e.jsx("h3",{className:"text-[length:var(--text-lg)]",children:r})]}),e.jsx("p",{className:"opacity-90",children:s})]})]})},u=({symbolName:r="osiadan",symbolSize:s=48,symbolColor:n="var(--brand-blue-strong)",showLine:o=!0,className:a=""})=>{const i=c[r].component;return e.jsxs("div",{className:`flex items-center gap-4 my-8 ${a}`,children:[o&&e.jsx("div",{className:"flex-1 h-px bg-border"}),e.jsx(i,{size:s,color:n}),o&&e.jsx("div",{className:"flex-1 h-px bg-border"})]})},C=()=>e.jsxs("div",{className:"min-h-screen bg-background",children:[e.jsx(N,{title:"Foundations",description:"Explore the design foundations of LUPMIS 2.0 including colors, typography, spacing, and Adinkra symbolism."}),e.jsx(f,{title:"Design Foundations",subtitle:"LUPMIS 2.0 Design Guidelines",symbolName:"osiadan",description:"Built for the Land Use and Spatial Planning Authority",children:e.jsx("p",{className:"text-[length:var(--text-base)] opacity-90 max-w-2xl leading-relaxed",children:"A comprehensive design guidelines built on proportional scaling principles, featuring Bebas Neue and Exo typography, enriched with Adinkra symbols representing West African wisdom and values."})}),e.jsxs("div",{className:"max-w-7xl mx-auto p-8 space-y-16",children:[e.jsxs("section",{children:[e.jsx(b,{title:"Adinkra Symbolism",subtitle:"West African symbols representing wisdom and values",symbolName:"osiadan"}),e.jsxs("div",{className:"bg-card p-8 rounded-2xl border border-border space-y-8 mt-8",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"mb-4",children:"Primary Symbol: Osiadan"}),e.jsxs("div",{className:"grid md:grid-cols-2 gap-8 items-center",children:[e.jsx("div",{className:"flex justify-center",children:e.jsx(y,{size:180,color:"var(--brand-blue-strong)"})}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx("h5",{className:"text-brand-blue-strong mb-2",children:"Osiadan (Nyame)"}),e.jsx("p",{className:"text-[length:var(--text-sm)] text-muted-foreground italic mb-3",children:'"The Builder"'}),e.jsxs("p",{className:"text-[length:var(--text-md)] leading-relaxed",children:["Symbolizes ",e.jsx("strong",{children:"the one who develops"})," — representing God the Creator who builds and sustains all things. This powerful symbol embodies foundational strength, divine construction, creative power, and the ongoing work of development and growth. Used to represent the builder's mindset and transformative creation."]})]}),e.jsx("div",{className:"bg-muted/50 p-4 rounded-lg",children:e.jsxs("p",{className:"text-[length:var(--text-sm)]",children:[e.jsx("strong",{className:"text-primary",children:"Meaning:"})," ","Power • Foundational Strength • Creation • Development • Divine Construction"]})}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(g,{label:"Primary Brand",symbolName:"osiadan",variant:"info"}),e.jsx(g,{label:"Hero Sections",symbolName:"osiadan",variant:"default"}),e.jsx(g,{label:"Development",symbolName:"osiadan",variant:"default"})]})]})]})]}),e.jsx(u,{symbolName:"osiadan"}),e.jsxs("div",{children:[e.jsx("h4",{className:"mb-4",children:"Complementary Symbols"}),e.jsx("div",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6",children:Object.entries(c).filter(([r])=>r!=="osiadan").map(([r,s])=>{const n=s.component;return e.jsxs("div",{className:"bg-muted p-4 rounded-xl hover:bg-accent transition-colors group cursor-pointer",children:[e.jsx("div",{className:"flex justify-center mb-3",children:e.jsx(n,{size:64,color:"var(--brand-blue-strong)",className:"group-hover:scale-110 transition-transform"})}),e.jsxs("div",{className:"text-center space-y-1",children:[e.jsx("h6",{className:"text-sm",children:s.name}),e.jsx("p",{className:"text-sm text-muted-foreground",children:s.meaning})]})]},r)})})]})]})]}),e.jsxs("section",{children:[e.jsx(b,{title:"Pattern Components",subtitle:"Pre-built components with Adinkra integration",symbolName:"nkyinkyim"}),e.jsxs("div",{className:"space-y-8 mt-8",children:[e.jsxs("div",{children:[e.jsx("h6",{className:"mb-4 text-muted-foreground",children:"Feature Cards"}),e.jsxs("div",{className:"grid md:grid-cols-3 gap-6",children:[e.jsx(j,{title:"Learning Center",subtitle:"Access our comprehensive knowledge base and educational resources to grow your skills.",symbolName:"sankofa",symbolColor:"var(--brand-blue-strong)"}),e.jsx(j,{title:"Team Collaboration",subtitle:"Work together seamlessly with unified tools and integrated workflows.",symbolName:"nkonsonkonson",symbolColor:"var(--brand-green-bright)"}),e.jsx(j,{title:"Secure Platform",subtitle:"Your data is protected with enterprise-grade security and privacy controls.",symbolName:"fihankra",symbolColor:"var(--brand-blue-gray)"})]})]}),e.jsxs("div",{children:[e.jsx("h6",{className:"mb-4 text-muted-foreground",children:"Gradient Symbol Cards"}),e.jsxs("div",{className:"grid md:grid-cols-2 gap-6",children:[e.jsx(v,{title:"Leadership",description:"Using Gye Nyame to represent supreme authority and guidance in your organization.",symbolName:"gyeNyame",gradientFrom:"var(--brand-blue-strong)",gradientTo:"var(--brand-navy)"}),e.jsx(v,{title:"Wisdom & Insights",description:"Using Nyansapo to represent intelligence, insight, and knowledge sharing across your platform.",symbolName:"nyansapo",gradientFrom:"var(--brand-brown-muted)",gradientTo:"var(--brand-orange-warm)"})]})]}),e.jsxs("div",{children:[e.jsx("h6",{className:"mb-4 text-muted-foreground",children:"Icon Navigation Grid"}),e.jsx(k,{columns:2,className:"lg:grid-cols-4",items:[{label:"Learn",symbolName:"sankofa",color:"var(--brand-blue-strong)"},{label:"Collaborate",symbolName:"nkonsonkonson",color:"var(--brand-green-bright)"},{label:"Achieve",symbolName:"dwennimmen",color:"var(--brand-green-deep)"},{label:"Secure",symbolName:"fihankra",color:"var(--brand-blue-gray)"}]})]}),e.jsxs("div",{children:[e.jsx("h6",{className:"mb-4 text-muted-foreground",children:"Symbol Buttons"}),e.jsxs("div",{className:"flex flex-wrap gap-4",children:[e.jsx(p,{symbolName:"osiadan",variant:"primary",children:"Primary Action"}),e.jsx(p,{symbolName:"dwennimmen",variant:"success",children:"Confirm"}),e.jsx(p,{symbolName:"nkyinkyim",variant:"warning",children:"Process"}),e.jsx(p,{symbolName:"sankofa",variant:"secondary",symbolPosition:"right",children:"Learn More"})]})]}),e.jsxs("div",{children:[e.jsx("h6",{className:"mb-4 text-muted-foreground",children:"Symbol Badges"}),e.jsxs("div",{className:"flex flex-wrap gap-3",children:[e.jsx(g,{label:"Verified Leader",symbolName:"adinkrahene",variant:"info",size:"lg"}),e.jsx(g,{label:"Team Member",symbolName:"nkonsonkonson",variant:"default",size:"md"}),e.jsx(g,{label:"Certified",symbolName:"dwennimmen",variant:"success",size:"md"}),e.jsx(g,{label:"In Progress",symbolName:"nkyinkyim",variant:"warning",size:"sm"})]})]}),e.jsxs("div",{children:[e.jsx("h6",{className:"mb-4 text-muted-foreground",children:"Loading States"}),e.jsx("div",{className:"bg-card p-8 rounded-xl border border-border",children:e.jsx(w,{symbolName:"osiadan",message:"Loading your experience...",size:80})})]})]})]}),e.jsx(u,{}),e.jsxs("section",{children:[e.jsx(b,{title:"Brand Colors",subtitle:"Pantone-based color palette",symbolName:"osiadan"}),e.jsxs("div",{className:"space-y-8 mt-8",children:[e.jsxs("div",{children:[e.jsx("h6",{className:"mb-4 text-muted-foreground",children:"Core Brand Colors"}),e.jsxs("div",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4",children:[e.jsx(m,{color:"brand-navy",hex:"#1E1A4B",name:"Navy"}),e.jsx(m,{color:"brand-blue-gray",hex:"#333F48",name:"Blue Gray"}),e.jsx(m,{color:"brand-blue-strong",hex:"#005EB8",name:"Blue Strong"}),e.jsx(m,{color:"brand-blue-light",hex:"#B9D9EB",name:"Blue Light",textDark:!0}),e.jsx(m,{color:"brand-gray-cool",hex:"#F2F4F7",name:"Gray Cool",textDark:!0})]})]}),e.jsxs("div",{children:[e.jsx("h6",{className:"mb-4 text-muted-foreground",children:"Secondary & Accent Colors"}),e.jsxs("div",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4",children:[e.jsx(m,{color:"brand-green-deep",hex:"#006B3F",name:"Green Deep"}),e.jsx(m,{color:"brand-green-bright",hex:"#41B6A6",name:"Green Bright"}),e.jsx(m,{color:"brand-brown-muted",hex:"#8B6F47",name:"Brown Muted"}),e.jsx(m,{color:"brand-orange-warm",hex:"#FF9E1B",name:"Orange Warm",textDark:!0}),e.jsx(m,{color:"brand-gray-medium",hex:"#7A7A7A",name:"Gray Medium"})]})]})]})]}),e.jsx(u,{}),e.jsxs("section",{children:[e.jsx(b,{title:"Typography Scale",subtitle:"Harmonious proportional type system",symbolName:"nyansapo"}),e.jsxs("div",{className:"space-y-6 bg-card p-8 rounded-xl border border-border mt-8",children:[e.jsxs("div",{children:[e.jsx("small",{className:"text-muted-foreground",children:"Bebas Neue - Display Headings"}),e.jsx("h1",{className:"text-[length:var(--text-3xl)]",children:"Display Extra Large"})]}),e.jsx("div",{children:e.jsx("h1",{children:"Heading 1 (Responsive)"})}),e.jsx("div",{children:e.jsx("h2",{children:"Heading 2 (Responsive)"})}),e.jsxs("div",{children:[e.jsx("small",{className:"text-muted-foreground",children:"Exo - Body Headings"}),e.jsx("h3",{children:"Heading 3"})]}),e.jsx("div",{children:e.jsx("h4",{children:"Heading 4"})}),e.jsx("div",{children:e.jsx("h5",{children:"Heading 5"})}),e.jsx("div",{children:e.jsx("h6",{children:"Heading 6"})}),e.jsx("div",{children:e.jsx("p",{className:"max-w-3xl",children:"Body text using Exo font. Our typographic scale uses proportional sizing to create harmonious relationships between text elements. This ensures optimal readability and clear visual hierarchy across all content. Lorem ipsum dolor sit amet, consectetur adipiscing elit."})}),e.jsx("div",{children:e.jsx("small",{children:"Small text for captions and helper information"})})]})]}),e.jsx(u,{}),e.jsxs("section",{children:[e.jsx(b,{title:"Spacing Scale",subtitle:"Proportional spacing system",symbolName:"adinkrahene"}),e.jsxs("div",{className:"space-y-4 bg-card p-8 rounded-xl border border-border mt-8",children:[e.jsx(h,{space:"1",label:"Space 1 (4px)"}),e.jsx(h,{space:"2",label:"Space 2 (8px)"}),e.jsx(h,{space:"3",label:"Space 3 (13px)"}),e.jsx(h,{space:"4",label:"Space 4 (16px)"}),e.jsx(h,{space:"5",label:"Space 5 (26px)"}),e.jsx(h,{space:"6",label:"Space 6 (42px)"}),e.jsx(h,{space:"8",label:"Space 8 (68px)"})]})]}),e.jsx(u,{}),e.jsxs("section",{children:[e.jsx(b,{title:"Dark Mode",subtitle:"Automatic theme adaptation",symbolName:"nkyinkyim"}),e.jsxs("div",{className:"bg-card p-8 rounded-xl border border-border mt-8",children:[e.jsx("p",{className:"mb-4 text-muted-foreground",children:"Toggle dark mode to see automatic color scheme adaptation. Adinkra symbols maintain visibility across themes."}),e.jsx(p,{symbolName:"nkyinkyim",variant:"primary",onClick:()=>document.documentElement.classList.toggle("dark"),children:"Toggle Dark Mode"})]})]}),e.jsxs("footer",{className:"text-center pt-8 border-t border-border space-y-4",children:[e.jsx(y,{size:48,color:"var(--brand-blue-strong)",className:"mx-auto"}),e.jsx("small",{className:"text-muted-foreground block",children:"LUPMIS 2.0 Design Guidelines"})]})]})]}),m=({color:r,hex:s,name:n,textDark:o=!1})=>e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{style:{backgroundColor:s},className:`h-24 rounded-lg border border-border ${o?"text-foreground":"text-white"} flex items-end p-3 bg-${r}`,children:e.jsx("span",{className:"font-[family:var(--font-body)] font-[weight:var(--font-weight-semibold)] text-sm",children:s})}),e.jsxs("div",{children:[e.jsx("p",{className:"font-[weight:var(--font-weight-medium)] text-sm",children:n}),e.jsxs("small",{className:"text-muted-foreground",children:["bg-",r]})]})]}),h=({space:r,label:s})=>e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("div",{className:"bg-primary h-8 rounded",style:{width:`var(--space-${r})`}}),e.jsx("span",{className:"text-sm text-muted-foreground",children:s})]});export{C as DesignSystemShowcase};
|