docs: search and page - ADMT-774

[marcelovicentegc]

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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
shoreline-docs	✅ Ready (Inspect)	Visit Preview	Mar 19, 2025 5:04pm

[lucasaarcoverde]

this looks like a collection example

[lucasaarcoverde]

I would break this in two examples:

1. With tag
2. With back navigation

[lucasaarcoverde]

Suggested change

	<PageHeading>Page with Tabs</PageHeading>
	<PageHeading>Products</PageHeading>

[lucasaarcoverde]

I don't see this bringing value to the Page example. I would remove it

Suggested change

	{/* 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>

[marcelovicentegc]

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).