Skip to content

fix: dry out components #311

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.

Sign up for GitHub

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

Open
lee-chase wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix: dry out components #311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
db52ec7
fix: dry out components
lee-chase Dec 3, 2025
748edfa
fix: spelling error
lee-chase Dec 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion cspell-dictionaries/project.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
Descriptionless
Pipeable
plex
Stephane
Descriptionless
16 changes: 9 additions & 7 deletions src/components/footer/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,17 @@
* LICENSE file in the root directory of this source tree.
*/

import { AspectRatio, Column } from '@carbon/react';
import { AspectRatio, Column, Grid } from '@carbon/react';

export const Footer = () => {
return (
<Column as="footer" sm={4} md={8} lg={8} className="cs--footer">
<AspectRatio ratio="16x9">
<p>Footer</p>
<p>Copyright IBM 2025</p>
</AspectRatio>
</Column>
<Grid as="footer" className="cs--footer">
<Column sm={4} md={8} lg={8}>
<AspectRatio ratio="16x9">
<p>Footer</p>
<p>Copyright IBM 2025</p>
</AspectRatio>
</Column>
</Grid>
);
};
93 changes: 9 additions & 84 deletions src/pages/dashboard/Dashboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,42 +5,17 @@
* LICENSE file in the root directory of this source tree.
*/

import { Column, Grid, Link, Tile, Stack } from '@carbon/react';
import { useState } from 'react';
import { useParams, useSearchParams } from 'react-router';

import { Footer } from '../../components/footer/Footer';
import { PageLayout } from '../../layouts/page-layout';
import { PageHeader } from '@carbon/ibm-products';
import DashboardURLParameters from './DashboardURLParameters';
import DashboardNumberTiles from './DashboardNumberTiles';
import DashboardVisualizations from './DashboardVisualizations';

// The styles are imported into index.scss by default.
// Do the same unless you have a good reason not to.

const NumberTile = () => {
const [activeUsers] = useState(() => Math.round(Math.random() * 1000));

return (
<Column sm={4} md={4} lg={4} xlg={4}>
<Tile className="cs--dashboard__tile cs--dashboard__tile--number">
<dl>
<dt>Active users</dt>
<dd>{activeUsers}</dd>
</dl>
</Tile>
</Column>
);
};

const Dashboard = () => {
// Access path parameters (e.g., /dashboard/1234 -> id = "1234")
const params = useParams();
const { id } = params;

// Access query parameters (e.g., /dashboard/1234?q=xxx&name=John -> q = "xxx", name = "John")
const [searchParams] = useSearchParams();
const queryParam = searchParams.get('q');
const nameParam = searchParams.get('name');

return (
<PageLayout
className="cs--dashboard"
Expand All @@ -49,64 +24,14 @@ const Dashboard = () => {
<PageLayout.Header>
<PageHeader title="Dashboard" />
</PageLayout.Header>
<Grid>
{/* Example: Display URL parameters when present */}
<Column sm={4} md={8} lg={16}>
<Tile className="cs--dashboard__tile">
<Stack gap={5}>
<strong>URL parameters example</strong>
{nameParam && (
<h2 style={{ margin: 0 }}>Hello {nameParam}! 👋</h2>
)}
<p>
This demonstrates how to access both path parameters and query
parameters from the URL. <br />
Try accessing:{' '}
<Link href="/dashboard/1234?q=xyz&name=Anne">
/dashboard/1234?q=xyz&name=Anne
</Link>
</p>
<dl>
{id && (
<>
<dt>Path parameter detected (id):</dt>
<dd>{id}</dd>
</>
)}
{queryParam && (
<>
<dt>Query parameter detected (q):</dt>
<dd>{queryParam}</dd>
</>
)}
{nameParam && (
<>
<dt>Query parameter detected (name):</dt>
<dd>{nameParam}</dd>
</>
)}
</dl>
</Stack>
</Tile>
</Column>

<NumberTile />
<NumberTile />
<NumberTile />
<NumberTile />
<DashboardURLParameters />

<DashboardNumberTiles />

<DashboardVisualizations />

<Column sm={4} md={4} lg={8} xlg={8}>
<Tile className="cs--dashboard__tile cs--dashboard__tile--data">
<strong>Visualization</strong>
</Tile>
</Column>
<Column sm={4} md={4} lg={8} xlg={8}>
<Tile className="cs--dashboard__tile cs--dashboard__tile--data">
<strong>Cool table</strong>
</Tile>
</Column>
<Footer />
</Grid>
<Footer />
</PageLayout>
);
};
Expand Down
39 changes: 39 additions & 0 deletions src/pages/dashboard/DashboardNumberTiles.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* Copyright IBM Corp. 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

import { Column, Grid, Tile } from '@carbon/react';
import { useState } from 'react';

const NumberTile = () => {
const [activeUsers] = useState(() => Math.round(Math.random() * 1000));

return (
<Column sm={4} md={4} lg={4} xlg={4}>
<Tile className="cs--dashboard__tile cs--dashboard__tile--number">
<dl>
<dt>Active users</dt>
<dd>{activeUsers}</dd>
</dl>
</Tile>
</Column>
);
};

const DashboardNumberTiles = () => {
return (
<Grid>
<NumberTile />
<NumberTile />
<NumberTile />
<NumberTile />
</Grid>
);
};

export default DashboardNumberTiles;

// Made with Bob
65 changes: 65 additions & 0 deletions src/pages/dashboard/DashboardURLParameters.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
/**
* Copyright IBM Corp. 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

import { Column, Link, Tile, Stack, Grid } from '@carbon/react';
import { useParams, useSearchParams } from 'react-router';

const DashboardURLParameters = () => {
// Access path parameters (e.g., /dashboard/1234 -> id = "1234")
const params = useParams();
const { id } = params;

// Access query parameters (e.g., /dashboard/1234?q=xxx&name=John -> q = "xxx", name = "John")
const [searchParams] = useSearchParams();
const queryParam = searchParams.get('q');
const nameParam = searchParams.get('name');

return (
<Grid>
<Column sm={4} md={8} lg={16}>
<Tile className="cs--dashboard__tile">
<Stack gap={5}>
<strong>URL parameters example</strong>
{nameParam && <h2 style={{ margin: 0 }}>Hello {nameParam}! 👋</h2>}
<p>
This demonstrates how to access both path parameters and query
parameters from the URL. <br />
Try accessing:{' '}
<Link href="/dashboard/1234?q=xyz&name=Anne">
/dashboard/1234?q=xyz&name=Anne
</Link>
</p>
<dl>
{id && (
<>
<dt>Path parameter detected (id):</dt>
<dd>{id}</dd>
</>
)}
{queryParam && (
<>
<dt>Query parameter detected (q):</dt>
<dd>{queryParam}</dd>
</>
)}
{nameParam && (
<>
<dt>Query parameter detected (name):</dt>
<dd>{nameParam}</dd>
</>
)}
</dl>
</Stack>
</Tile>
</Column>
</Grid>
);
};

export default DashboardURLParameters;

// Made with Bob
29 changes: 29 additions & 0 deletions src/pages/dashboard/DashboardVisualisations.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/**
* Copyright IBM Corp. 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

import { Column, Grid, Tile } from '@carbon/react';

const DashboardVisualizations = () => {
return (
<Grid>
<Column sm={4} md={4} lg={8} xlg={8}>
<Tile className="cs--dashboard__tile cs--dashboard__tile--data">
<strong>Visualization</strong>
</Tile>
</Column>
<Column sm={4} md={4} lg={8} xlg={8}>
<Tile className="cs--dashboard__tile cs--dashboard__tile--data">
<strong>Cool table</strong>
</Tile>
</Column>
</Grid>
);
};

export default DashboardVisualizations;

// Made with Bob
31 changes: 31 additions & 0 deletions src/pages/dashboard/DashboardVisualizations.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/**
Copy link
Contributor

@Josip-Ledic Josip-Ledic Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

British vs. American English file name, probably duplicate

* Copyright IBM Corp. 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

import { Column, Grid, Tile } from '@carbon/react';

const DataVisualization = ({ title }) => {
return (
<Column sm={4} md={4} lg={8} xlg={8}>
<Tile className="cs--dashboard__tile cs--dashboard__tile--data">
<strong>{title}</strong>
</Tile>
</Column>
);
};

const DashboardVisualizations = () => {
return (
<Grid>
<DataVisualization title="Visualization" />
<DataVisualization title="Cool table" />
</Grid>
);
};

export default DashboardVisualizations;

// Made with Bob
Loading
Loading