Emails
1 month ago
EngagementChart
2 months ago
MediaHub
1 month ago
Onboarding
2 months ago
Popup
2 months ago
Skeletons
1 month ago
WhatsNew
2 months ago
charts
2 months ago
test
2 months ago
AdminMenuSync.js
2 months ago
ChartEmptyState.js
2 months ago
ChooseDate.js
2 months ago
ColorPicker.js
2 months ago
ExtendPlugins.js
2 months ago
Filters.js
2 months ago
Link.js
2 months ago
Navbar.js
1 month ago
NoFound.js
2 months ago
PageHeader.js
2 months ago
PluginRecommendations.js
2 months ago
PostScheduleField.js
2 months ago
PrestoPlayerIcon.js
2 months ago
ProGateOverlay.js
2 months ago
QuickAccess.js
2 months ago
RankedTable.js
2 months ago
StatCard.js
2 months ago
TopMedia.js
2 months ago
TopPerformingMedia.js
2 months ago
TopUsers.js
2 months ago
TruncatedTitle.js
2 months ago
UpgradeNotice.js
2 months ago
UpgradeToPro.js
2 months ago
VideoModal.js
2 months ago
WelcomeBanner.js
2 months ago
PageHeader.js
70 lines
| 1 | /** |
| 2 | * Shared list-page header: title, optional filter toggle, search, primary action button. |
| 3 | * Matches MediaHub layout/design. Used by MediaHub and Emails. |
| 4 | */ |
| 5 | import React from "react"; |
| 6 | import { __ } from "@wordpress/i18n"; |
| 7 | import { Container, Title, Button } from "@bsf/force-ui"; |
| 8 | import { ListFilter, Plus } from "lucide-react"; |
| 9 | import SearchBar from "./MediaHub/SearchBar"; |
| 10 | |
| 11 | const PageHeader = ({ |
| 12 | title, |
| 13 | showFilter, |
| 14 | setShowFilter, |
| 15 | showFilterWhen, |
| 16 | searchPlaceholder, |
| 17 | searchValue, |
| 18 | onSearchChange, |
| 19 | searchInputRef, |
| 20 | primaryButtonText, |
| 21 | onPrimaryClick, |
| 22 | }) => ( |
| 23 | <Container className="w-full flex items-center justify-between"> |
| 24 | <Container.Item grow={1}> |
| 25 | <Title |
| 26 | description="" |
| 27 | icon={null} |
| 28 | iconPosition="right" |
| 29 | size="md" |
| 30 | tag="h4" |
| 31 | title={title} |
| 32 | /> |
| 33 | </Container.Item> |
| 34 | <Container.Item className="flex items-center gap-6"> |
| 35 | {showFilterWhen && ( |
| 36 | <Button |
| 37 | aria-label={__("Toggle filters", "presto-player")} |
| 38 | aria-pressed={showFilter} |
| 39 | icon={<ListFilter aria-label="icon" role="img" />} |
| 40 | iconPosition="left" |
| 41 | size="sm" |
| 42 | tag="button" |
| 43 | type="button" |
| 44 | variant={showFilter ? "primary" : "ghost"} |
| 45 | onClick={() => setShowFilter(!showFilter)} |
| 46 | /> |
| 47 | )} |
| 48 | <SearchBar |
| 49 | inputRef={searchInputRef} |
| 50 | value={searchValue} |
| 51 | onChange={onSearchChange} |
| 52 | placeholder={searchPlaceholder} |
| 53 | /> |
| 54 | <Button |
| 55 | icon={<Plus aria-label="icon" role="img" />} |
| 56 | iconPosition="left" |
| 57 | size="sm" |
| 58 | tag="button" |
| 59 | type="button" |
| 60 | variant="primary" |
| 61 | onClick={onPrimaryClick} |
| 62 | > |
| 63 | {primaryButtonText} |
| 64 | </Button> |
| 65 | </Container.Item> |
| 66 | </Container> |
| 67 | ); |
| 68 | |
| 69 | export default PageHeader; |
| 70 |