export declare const sectionBarTemplate = "\"use client\";\nimport { usePathname } from \"next/navigation\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\n\ninterface SectionConfig {\n  label: string;\n  slug: string;\n  directory?: string;\n}\n\ninterface SectionBarProps {\n  sections: SectionConfig[];\n}\n\nconst StyledSectionBar = styled.nav<{ theme: Theme }>`\n  display: flex;\n  order: 3;\n  width: calc(100% + 20px);\n  margin: 0 0 0 -10px;\n  padding: 0;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    padding: 0 10px;\n    order: unset;\n    width: 100%;\n    margin: 0;\n    justify-content: flex-end;\n  }\n`;\n\nconst StyledSectionLink = styled(Link)<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledText(theme)};\n  text-decoration: none;\n  padding: 16px 10px;\n  white-space: nowrap;\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"500\")};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.gray};\n  border-bottom: solid 2px\n    ${({ theme, $isActive }) =>\n      $isActive ? theme.colors.primary : \"transparent\"};\n  transition: all 0.3s ease;\n  min-width: fit-content;\n  position: relative;\n\n  /* The section bar scrolls horizontally, and overflow-x:auto makes it clip\n     vertically too, so an edge-drawn ring gets shaved top and bottom. Draw the\n     ring on an inset pseudo-element so it sits fully inside the link and can't\n     be clipped on any side. */\n  &:focus-visible {\n    outline: none;\n    /* Opt out of the global a:focus-visible ring; the ::after below draws it\n       inset so the scroll container can't clip it. */\n    box-shadow: none;\n  }\n\n  &:focus-visible::after {\n    content: \"\";\n    position: absolute;\n    inset: 3px;\n    border: solid 2px ${({ theme }) => theme.colors.primaryLight};\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    pointer-events: none;\n  }\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nfunction SectionBar({ sections }: SectionBarProps) {\n  const pathname = usePathname();\n  const currentPath = pathname.replace(/^\\//, \"\").replace(/\\/$/, \"\");\n\n  const activeSection = sections.find((section) => {\n    if (section.slug === \"\") return false;\n    return (\n      currentPath === section.slug || currentPath.startsWith(section.slug + \"/\")\n    );\n  });\n\n  const activeSectionSlug = activeSection ? activeSection.slug : \"\";\n\n  return (\n    <StyledSectionBar>\n      {sections.map((section) => (\n        <StyledSectionLink\n          key={section.slug}\n          href={section.slug === \"\" ? \"/\" : `/${section.slug}`}\n          $isActive={activeSectionSlug === section.slug}\n        >\n          {section.label}\n        </StyledSectionLink>\n      ))}\n    </StyledSectionBar>\n  );\n}\n\nexport { SectionBar };\n";