-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: search and page - ADMT-774 #2095
base: main
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
||
<Preview name="search-with-clear-button" /> | ||
|
||
### With collection |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this looks like a collection example
### With back button and tag | ||
|
||
<Preview name="page-with-back-and-tag" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would break this in two examples:
- With tag
- With back navigation
<TabProvider> | ||
<PageHeader> | ||
<PageHeaderRow> | ||
<PageHeading>Page with Tabs</PageHeading> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<PageHeading>Page with Tabs</PageHeading> | |
<PageHeading>Products</PageHeading> |
{/* Campaign Details Drawer */} | ||
<DrawerProvider open={drawerOpen} onOpenChange={setDrawerOpen}> | ||
<DrawerPopover> | ||
<DrawerHeader> | ||
<DrawerHeading>Campaign Details</DrawerHeading> | ||
<DrawerDismiss /> | ||
</DrawerHeader> | ||
<DrawerContent> | ||
<Stack space="$space-6"> | ||
<Stack space="$space-3"> | ||
<Heading level={2}>Summer Sale 2023</Heading> | ||
<Table | ||
columnWidths={[ | ||
'minmax(min-content, auto)', | ||
'minmax(min-content, auto)', | ||
]} | ||
> | ||
<TableBody> | ||
<TableRow> | ||
<TableCell> | ||
<strong>Status</strong> | ||
</TableCell> | ||
<TableCell> | ||
<Tag variant="secondary" color="green"> | ||
Active | ||
</Tag> | ||
</TableCell> | ||
</TableRow> | ||
<TableRow> | ||
<TableCell> | ||
<strong>Start Date</strong> | ||
</TableCell> | ||
<TableCell>June 1, 2023</TableCell> | ||
</TableRow> | ||
<TableRow> | ||
<TableCell> | ||
<strong>End Date</strong> | ||
</TableCell> | ||
<TableCell>August 31, 2023</TableCell> | ||
</TableRow> | ||
<TableRow> | ||
<TableCell> | ||
<strong>Target Audience</strong> | ||
</TableCell> | ||
<TableCell>25-45 years, Urban demographics</TableCell> | ||
</TableRow> | ||
<TableRow> | ||
<TableCell> | ||
<strong>Channels</strong> | ||
</TableCell> | ||
<TableCell>Email, Social Media, Display Ads</TableCell> | ||
</TableRow> | ||
<TableRow> | ||
<TableCell> | ||
<strong>Budget Allocation</strong> | ||
</TableCell> | ||
<TableCell> | ||
$10,000 ($5,000 Social, $3,000 Display, $2,000 Email) | ||
</TableCell> | ||
</TableRow> | ||
</TableBody> | ||
</Table> | ||
</Stack> | ||
|
||
<Stack space="$space-3"> | ||
<Heading level={2}>Campaign Summary</Heading> | ||
<Text> | ||
Our Summer Sale 2023 campaign targets customers during the | ||
peak summer shopping season. The campaign focuses on seasonal | ||
products with discounts ranging from 20-50% off. So far, it | ||
has generated 256 conversions with an impressive ROI of 3.2x. | ||
</Text> | ||
</Stack> | ||
|
||
<Stack space="$space-3"> | ||
<Heading level={2}>Primary Objectives</Heading> | ||
<Text> | ||
• Increase sales of summer products by 30% | ||
<br />• Grow email subscriber list by 15% | ||
<br />• Boost social media engagement by 25% | ||
<br />• Achieve overall ROI target of 3.5x | ||
</Text> | ||
</Stack> | ||
</Stack> | ||
</DrawerContent> | ||
<DrawerFooter> | ||
<Button onClick={() => setDrawerOpen(false)} size="large"> | ||
Close | ||
</Button> | ||
<Button variant="primary" size="large"> | ||
Edit Campaign | ||
</Button> | ||
</DrawerFooter> | ||
</DrawerPopover> | ||
</DrawerProvider> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't see this bringing value to the Page example. I would remove it
{/* Campaign Details Drawer */} | |
<DrawerProvider open={drawerOpen} onOpenChange={setDrawerOpen}> | |
<DrawerPopover> | |
<DrawerHeader> | |
<DrawerHeading>Campaign Details</DrawerHeading> | |
<DrawerDismiss /> | |
</DrawerHeader> | |
<DrawerContent> | |
<Stack space="$space-6"> | |
<Stack space="$space-3"> | |
<Heading level={2}>Summer Sale 2023</Heading> | |
<Table | |
columnWidths={[ | |
'minmax(min-content, auto)', | |
'minmax(min-content, auto)', | |
]} | |
> | |
<TableBody> | |
<TableRow> | |
<TableCell> | |
<strong>Status</strong> | |
</TableCell> | |
<TableCell> | |
<Tag variant="secondary" color="green"> | |
Active | |
</Tag> | |
</TableCell> | |
</TableRow> | |
<TableRow> | |
<TableCell> | |
<strong>Start Date</strong> | |
</TableCell> | |
<TableCell>June 1, 2023</TableCell> | |
</TableRow> | |
<TableRow> | |
<TableCell> | |
<strong>End Date</strong> | |
</TableCell> | |
<TableCell>August 31, 2023</TableCell> | |
</TableRow> | |
<TableRow> | |
<TableCell> | |
<strong>Target Audience</strong> | |
</TableCell> | |
<TableCell>25-45 years, Urban demographics</TableCell> | |
</TableRow> | |
<TableRow> | |
<TableCell> | |
<strong>Channels</strong> | |
</TableCell> | |
<TableCell>Email, Social Media, Display Ads</TableCell> | |
</TableRow> | |
<TableRow> | |
<TableCell> | |
<strong>Budget Allocation</strong> | |
</TableCell> | |
<TableCell> | |
$10,000 ($5,000 Social, $3,000 Display, $2,000 Email) | |
</TableCell> | |
</TableRow> | |
</TableBody> | |
</Table> | |
</Stack> | |
<Stack space="$space-3"> | |
<Heading level={2}>Campaign Summary</Heading> | |
<Text> | |
Our Summer Sale 2023 campaign targets customers during the | |
peak summer shopping season. The campaign focuses on seasonal | |
products with discounts ranging from 20-50% off. So far, it | |
has generated 256 conversions with an impressive ROI of 3.2x. | |
</Text> | |
</Stack> | |
<Stack space="$space-3"> | |
<Heading level={2}>Primary Objectives</Heading> | |
<Text> | |
• Increase sales of summer products by 30% | |
<br />• Grow email subscriber list by 15% | |
<br />• Boost social media engagement by 25% | |
<br />• Achieve overall ROI target of 3.5x | |
</Text> | |
</Stack> | |
</Stack> | |
</DrawerContent> | |
<DrawerFooter> | |
<Button onClick={() => setDrawerOpen(false)} size="large"> | |
Close | |
</Button> | |
<Button variant="primary" size="large"> | |
Edit Campaign | |
</Button> | |
</DrawerFooter> | |
</DrawerPopover> | |
</DrawerProvider> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This brings lots of value to the AI. The page from the Admin Transactions app was generated through Copilot certainly through this example (because of the Drawer).
Co-authored-by: Lucas Arcoverde <[email protected]>
Co-authored-by: Lucas Arcoverde <[email protected]>
Summary
Add more implementation examples of the Search and Page components to increase accuracy of our AI gen pipeline.
Demo
Screencast.from.2025-03-17.14-12-56.mp4