Skip to content

Commit

Permalink
feat(root): homepage SVG
Browse files Browse the repository at this point in the history 
SVG change based on theme in the Home Page section

1318
  • Loading branch information
@gd2910
gd2910 committed Jan 21, 2025
1 parent b13ae1c commit 40e0385
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 85 deletions.
1 change: 1 addition & 0 deletions src/assets/svg/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@ export { default as ICDSLogo } from "./icds-logo.svg";
export { default as StackBlitzLogo } from "./stackblitz-logo.svg";
export { default as DesignImage } from "./designers-image.svg";
export { default as DevImage } from "./developers-image.svg";
export { default as TestDarkImage } from "./test-dark-mode-image.svg";
9 changes: 9 additions & 0 deletions src/assets/svg/test-dark-mode-image.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
103 changes: 21 additions & 82 deletions src/icds-pages-data.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -903,13 +903,7 @@
"path": "/components/alert/accessibility"
}
],
"tags": [
"Notification",
"Feedback",
"Message",
"Banner",
"Callout"
],
"tags": ["Notification", "Feedback", "Message", "Banner", "Callout"],
"meta": {
"relativePath": "components\\alerts\\guidance.mdx",
"createdAt": "2024-12-31T11:42:11.344Z",
Expand Down Expand Up @@ -1004,11 +998,7 @@
"path": "/components/back-to-top/accessibility"
}
],
"tags": [
"Button",
"Anchor",
"Scroll to top"
],
"tags": ["Button", "Anchor", "Scroll to top"],
"meta": {
"relativePath": "components\\back-to-top\\guidance.mdx",
"createdAt": "2024-12-31T11:42:11.352Z",
Expand Down Expand Up @@ -1103,11 +1093,7 @@
"path": "/components/badge/accessibility"
}
],
"tags": [
"Tab",
"Label",
"Chip"
],
"tags": ["Tab", "Label", "Chip"],
"meta": {
"relativePath": "components\\badge\\guidance.mdx",
"createdAt": "2024-12-31T11:42:51.267Z",
Expand Down Expand Up @@ -1202,9 +1188,7 @@
"path": "/components/breadcrumb/accessibility"
}
],
"tags": [
"Breadcrumb trail"
],
"tags": ["Breadcrumb trail"],
"meta": {
"relativePath": "components\\breadcrumbs\\guidance.mdx",
"createdAt": "2024-12-31T11:42:51.269Z",
Expand Down Expand Up @@ -1635,9 +1619,7 @@
"path": "/components/chip/accessibility"
}
],
"tags": [
"Tags"
],
"tags": ["Tags"],
"meta": {
"relativePath": "components\\chips\\guidance.mdx",
"createdAt": "2024-12-31T11:42:11.449Z",
Expand Down Expand Up @@ -1879,9 +1861,7 @@
"path": "/components/data-table/code"
}
],
"tags": [
"Table"
],
"tags": ["Table"],
"meta": {
"relativePath": "components\\data-table\\guidance.mdx",
"createdAt": "2024-12-31T11:42:11.475Z",
Expand Down Expand Up @@ -2064,10 +2044,7 @@
"path": "/components/date-picker/accessibility"
}
],
"tags": [
"Calendar",
"Datetime picker"
],
"tags": ["Calendar", "Datetime picker"],
"meta": {
"relativePath": "components\\date-picker\\guidance.mdx",
"createdAt": "2024-12-31T11:42:11.487Z",
Expand Down Expand Up @@ -2162,10 +2139,7 @@
"path": "/components/dialog/accessibility"
}
],
"tags": [
"Popup",
"Modal window"
],
"tags": ["Popup", "Modal window"],
"meta": {
"relativePath": "components\\dialog\\guidance.mdx",
"createdAt": "2024-12-31T11:42:51.298Z",
Expand Down Expand Up @@ -2545,9 +2519,7 @@
"path": "/components/hero/accessibility"
}
],
"tags": [
"Banner"
],
"tags": ["Banner"],
"meta": {
"relativePath": "components\\hero\\guidance.mdx",
"createdAt": "2024-12-31T11:42:51.325Z",
Expand Down Expand Up @@ -2658,10 +2630,7 @@
"path": "/components/link/accessibility"
}
],
"tags": [
"Anchor",
"Hyperlink"
],
"tags": ["Anchor", "Hyperlink"],
"meta": {
"relativePath": "components\\links\\guidance.mdx",
"createdAt": "2024-12-31T11:42:51.326Z",
Expand Down Expand Up @@ -2756,11 +2725,7 @@
"path": "/components/loading-indicator/accessibility"
}
],
"tags": [
"Progress bar",
"Progress indicator",
"Spinner"
],
"tags": ["Progress bar", "Progress indicator", "Spinner"],
"meta": {
"relativePath": "components\\loading-indicators\\guidance.mdx",
"createdAt": "2024-12-31T11:42:51.327Z",
Expand Down Expand Up @@ -3231,9 +3196,7 @@
"path": "/components/search-bar/accessibility"
}
],
"tags": [
"Search input"
],
"tags": ["Search input"],
"meta": {
"relativePath": "components\\search-bar\\guidance.mdx",
"createdAt": "2024-12-31T11:42:51.334Z",
Expand Down Expand Up @@ -3524,9 +3487,7 @@
"path": "/components/side-navigation/accessibility"
}
],
"tags": [
"Navigation bar"
],
"tags": ["Navigation bar"],
"meta": {
"relativePath": "components\\side-nav\\guidance.mdx",
"createdAt": "2024-12-31T11:42:51.337Z",
Expand Down Expand Up @@ -3715,9 +3676,7 @@
"path": "/components/status-tag/accessibility"
}
],
"tags": [
"Tags"
],
"tags": ["Tags"],
"meta": {
"relativePath": "components\\status-tags\\guidance.mdx",
"createdAt": "2024-12-31T11:42:51.339Z",
Expand Down Expand Up @@ -3812,11 +3771,7 @@
"path": "/components/stepper/accessibility"
}
],
"tags": [
"Progress indicator",
"Steps",
"Progress tracker"
],
"tags": ["Progress indicator", "Steps", "Progress tracker"],
"meta": {
"relativePath": "components\\stepper\\guidance.mdx",
"createdAt": "2024-12-31T11:42:51.340Z",
Expand Down Expand Up @@ -3911,10 +3866,7 @@
"path": "/components/switch/accessibility"
}
],
"tags": [
"Toggle",
"Lightswitch"
],
"tags": ["Toggle", "Lightswitch"],
"meta": {
"relativePath": "components\\switch\\guidance.mdx",
"createdAt": "2024-12-31T11:42:51.342Z",
Expand Down Expand Up @@ -4103,10 +4055,7 @@
"path": "/components/text-field/accessibility"
}
],
"tags": [
"Text input",
"Text area"
],
"tags": ["Text input", "Text area"],
"meta": {
"relativePath": "components\\text-field\\guidance.mdx",
"createdAt": "2024-12-31T11:42:11.758Z",
Expand Down Expand Up @@ -4201,9 +4150,7 @@
"path": "/components/toast/accessibility"
}
],
"tags": [
"Snackbar"
],
"tags": ["Snackbar"],
"meta": {
"relativePath": "components\\toasts\\guidance.mdx",
"createdAt": "2025-01-06T13:48:46.465Z",
Expand Down Expand Up @@ -4298,9 +4245,7 @@
"path": "/components/toggle-button/accessibility"
}
],
"tags": [
"Segmented control"
],
"tags": ["Segmented control"],
"meta": {
"relativePath": "components\\toggle-buttons\\guidance.mdx",
"createdAt": "2024-12-31T11:42:11.785Z",
Expand Down Expand Up @@ -4489,9 +4434,7 @@
"path": "/components/top-navigation/accessibility"
}
],
"tags": [
"Navigation bar"
],
"tags": ["Navigation bar"],
"meta": {
"relativePath": "components\\top-nav\\guidance.mdx",
"createdAt": "2024-12-31T11:42:11.798Z",
Expand Down Expand Up @@ -4643,11 +4586,7 @@
"path": "/components/typography/accessibility"
}
],
"tags": [
"Text",
"Heading",
"Label"
],
"tags": ["Text", "Heading", "Label"],
"meta": {
"relativePath": "components\\typography\\guidance.mdx",
"createdAt": "2025-01-06T13:48:46.468Z",
Expand Down
20 changes: 17 additions & 3 deletions src/templates/Homepage/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { lazy, Suspense } from "react";
import clsx from "clsx";
import { Link as GatsbyLink } from "gatsby";
import Icon from "@mdi/react";
Expand All @@ -11,7 +11,7 @@ import accessibility from "../../assets/png/accessibility.png";
import components from "../../assets/png/components.png";
import patterns from "../../assets/png/patterns.png";
import styles from "../../assets/png/styles.png";
import { DesignImage, DevImage } from "../../assets/svg";
import { DevImage } from "../../assets/svg";

import "./index.css";
import { useViewportWidth } from "../../utils/helpers";
Expand Down Expand Up @@ -84,7 +84,19 @@ const Homepage: React.FC = () => {
};

const { theme } = useTheme();
const LightDesignImage = lazy(
() => import("../../assets/svg/designers-image.svg")
);
const DarkDesignImage = lazy(
() => import("../../assets/svg/test-dark-mode-image.svg")
);

const DesignImageTest =
theme === "light" ? (
<LightDesignImage className="design-image" />
) : (
<DarkDesignImage className="design-image" />
);
return (
<div className="homepage">
<ic-hero
Expand Down Expand Up @@ -196,7 +208,9 @@ const Homepage: React.FC = () => {
</div>
</div>
<div>
<DesignImage className="design-image" />
<Suspense fallback={<div>Loading...</div>}>
{DesignImageTest}
</Suspense>
</div>
</div>
<hr aria-hidden="true" className="divider" />
Expand Down

0 comments on commit 40e0385

Please sign in to comment.