\n {/* Desktop: Horizontal layout with pipe separators */}\n

\n \n PUBLISHED\n \n {TIME_FILTER_OPTIONS.map(({ key, label }, index) => (\n \n {index > 0 && | }\n onTimePeriodChange(key)}\n className={`text-base font-normal hover:opacity-80 transition-opacity border-none ${\n timePeriod === key ? \"gradient-pattern\" : \"\"\n }`}\n style={{\n color:\n timePeriod === key\n ? \"var(--header-color)\"\n : \"var(--text-color)\",\n }}\n >\n {label}\n \n \n ))}\n

\n\n {/* Mobile: Collapsible layout */}\n

\n setIsExpanded(!isExpanded)}\n className=\"text-left border-none bg-transparent p-0 hover:opacity-80 transition-opacity\"\n >\n \n PUBLISHED\n \n {!isExpanded && (\n ({currentLabel})\n )}\n \n\n {isExpanded && (\n

\n {TIME_FILTER_OPTIONS.map(({ key, label }, index) => (\n \n {index > 0 && (\n \n )}\n {\n onTimePeriodChange(key);\n setIsExpanded(false);\n }}\n className={`text-base font-normal hover:opacity-80 transition-opacity border-none text-left ${\n timePeriod === key ? \"gradient-pattern\" : \"\"\n }`}\n style={{\n color:\n timePeriod === key\n ? \"var(--header-color)\"\n : \"var(--text-color)\",\n }}\n >\n {label}\n \n \n ))}\n

\n )}\n

\n );\n}\n","deleted","label",[170,171,151],"frontend","components","permalink","https://www.val.town/x/artivilla/rss/code/frontend/components/TimeFilter.tsx","extension","actionData","errors"]