{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "commitment-banner", "title": "Commitment Banner", "description": "Bandeau engagements ESF / France Montagnes. Composite (peer dep @valraiso/ublo-astro pour Astro.locals.lang).", "dependencies": [ "@valraiso/ublo-astro" ], "files": [ { "path": "registry/valraiso/commitment-banner/commitment-banner.astro", "content": "---\nimport title from \"./data/title.json\";\nimport links from \"./data/links.json\";\nimport styles from \"./commitment-banner.module.css\";\n\n/**\n * CommitmentBanner — bandeau « engagements ESF / France Montagnes ».\n *\n * Composite : utilise `Astro.locals.lang` (fourni par @valraiso/ublo-astro)\n * comme valeur par défaut, surchargeable via la prop `lang`.\n *\n * Personnalisation :\n * - `class` : classe(s) ajoutée(s) au conteneur.\n * - `mode=\"dark\"` : variante sombre.\n * - variables CSS : --banner-* (voir commitment-banner.module.css).\n */\ntype Lang = keyof typeof title;\n\ninterface Props {\n /** Langue d'affichage. Défaut : Astro.locals.lang puis \"fr\". */\n lang?: string;\n /** Classe(s) CSS additionnelle(s) sur le conteneur. */\n class?: string;\n /** \"dark\" pour la variante sombre. */\n mode?: string;\n}\n\nconst localeLang = (Astro.locals as { lang?: string } | undefined)?.lang;\nconst { lang = localeLang ?? \"fr\", class: className, mode } = Astro.props;\nconst hasContent = (lang as Lang) in title;\n---\n\n{\n hasContent && (\n \n
\n
\n \n \n \n
\n
\n
{title[lang as keyof typeof title]}
\n
\n {Object.keys(links).map((key) => {\n const langs = links[key as keyof typeof links];\n const content =\n langs[lang as keyof typeof langs] ??\n langs[\"fr\" as keyof typeof langs];\n if (!content) return null;\n const { label, href } = content;\n\n return (\n \n {label}\n \n );\n })}\n
\n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n )\n}\n", "type": "registry:file", "target": "src/components/valraiso/commitment-banner/commitment-banner.astro" }, { "path": "registry/valraiso/commitment-banner/commitment-banner.module.css", "content": ".banner {\n position: relative;\n padding: var(--banner-padding, 27px 20px);\n background-color: var(--banner-background, #fff);\n font-family: Helvetica, sans-serif;\n color: var(--banner-foreground, #222222);\n margin: 0 auto;\n z-index: var(--banner-z-index, auto);\n\n @media (width > 992px) {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: var(--banner-padding, 27px 48px);\n }\n}\n\n.inner {\n display: flex;\n flex-direction: column;\n gap: 40px;\n max-width: var(--banner-width, 1440px);\n margin: 0 auto;\n\n @media (width > 992px) {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n }\n}\n\n.dark {\n background-color: var(--banner-dark-background, #222222);\n color: var(--banner-dark-foreground, #fff);\n}\n\n.presentation {\n display: flex;\n flex-direction: column;\n gap: 40px;\n height: 100%;\n\n @media (width > 992px) {\n flex-direction: row;\n align-items: flex-start;\n }\n}\n\n.banner svg,\n.montagnelogo {\n align-self: center;\n}\n\n.esflogo {\n flex: 1 0 auto;\n}\n\n.separator {\n background-color: var(--banner-separator, #c9c9c9);\n width: 100%;\n height: 1px;\n\n @media (width > 992px) {\n width: 1px;\n height: 67px;\n transform: scaleY(1.2);\n }\n}\n\n.title {\n text-transform: uppercase;\n font-size: 14px;\n font-weight: 600;\n color: var(#222222);\n}\n\n.dark .title {\n color: var(--banner-dark-title-color, #fff);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n gap: 12px;\n}\n\n.links {\n display: flex;\n align-items: center;\n gap: 10px 50px;\n flex-wrap: wrap;\n}\n\n.link {\n position: relative;\n font-size: 13px;\n font-weight: bold;\n text-decoration: underline;\n margin-left: 10px;\n color: var(--banner-link-color, #222222);\n}\n\n.dark .link {\n color: var(--banner-dark-link-color, #fff);\n}\n\n/* .link + .link {\n margin-left: 50px;\n} */\n\n.link::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: -10px;\n transform: translateY(-50%);\n width: 5px;\n height: 5px;\n background-color: var(--banner-tag, #cc0a00);\n border-radius: var(--banner-border-radius, 50%);\n}\n", "type": "registry:file", "target": "src/components/valraiso/commitment-banner/commitment-banner.module.css" }, { "path": "registry/valraiso/commitment-banner/data/title.json", "content": "{\n \"fr\": \"Nos engagements\",\n \"en\": \"Our commitments\",\n \"es\": \"Nuestros compromisos\",\n \"nl\": \"Onze beloftes\",\n \"ru\": \"Наши обязательства\",\n \"ca\": \"Els nostres compromisos\",\n \"it\": \"I nostri impegni\"\n}\n", "type": "registry:file", "target": "src/components/valraiso/commitment-banner/data/title.json" }, { "path": "registry/valraiso/commitment-banner/data/links.json", "content": "{\n \"safety-education\": {\n \"fr\": {\n \"label\": \"La sécurité et éducation\",\n \"href\": \"https://www.esf.net/a-propos/engagement-securite-et-education\"\n }\n },\n \"youth\": {\n \"fr\": {\n \"label\": \"La jeunesse\",\n \"href\": \"https://www.esf.net/a-propos/engagement-pour-la-jeunesse\"\n }\n },\n \"environment\": {\n \"fr\": {\n \"label\": \"L'environnement\",\n \"href\": \"https://www.esf.net/a-propos/engagement-pour-l-environnement\"\n }\n },\n \"territories\": {\n \"fr\": {\n \"label\": \"Les territoires\",\n \"href\": \"https://www.esf.net/a-propos/engagement-pour-les-territoires\"\n }\n },\n \"cooperatif\": {\n \"fr\": {\n \"label\": \"Le modèle coopératif\",\n \"href\": \"https://www.esf.net/a-propos/engagement-pour-le-modele-cooperatif\"\n }\n }\n}\n", "type": "registry:file", "target": "src/components/valraiso/commitment-banner/data/links.json" } ], "type": "registry:component" }