Skip to content

Commit c3ea70a

Browse files
msenechalmsenechal
committed
Adding cards to the landing page + adding support for icons
1 parent c8d23bd commit c3ea70a

File tree

6 files changed

+48
-23
lines changed

6 files changed

+48
-23
lines changed

‎src/assets/img/component/CardImg-dark.png

63.4 KB
Loading

‎src/assets/img/component/CardImg-light.png

63.8 KB
Loading

‎src/landingPage/categories/Component.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ import Card from '../components/Card';
55
import ChatbotImgDark from '../../assets/img/component/ChatbotImg-dark.png';
66
import ConnectionModalImgDark from '../../assets/img/component/ConnectionModalImg-dark.png';
77
import HeaderImgDark from '../../assets/img/component/HeaderImg-dark.png';
8+
import CardImgDark from '../../assets/img/component/CardImg-dark.png';
89

910
// Light mode featured images
1011
import ChatbotImgLight from '../../assets/img/component/ChatbotImg-light.png';
1112
import ConnectionModalImgLight from '../../assets/img/component/ConnectionModalImg-light.png';
1213
import HeaderImgLight from '../../assets/img/component/HeaderImg-light.png';
14+
import CardImgLight from '../../assets/img/component/CardImg-light.png';
1315

1416
import { useContext } from 'react';
1517
import { ThemeWrapperContext } from '../../context/ThemeWrapper';
@@ -48,6 +50,16 @@ export default function Component() {
4850
}/src/templates/shared/components/Header.tsx`,
4951
previewLink: '/header-preview',
5052
},
53+
{
54+
title: 'Card',
55+
description:
56+
'A versatile card component that can be used to display information in a clean and organized way. It is designed to be easily customizable to fit your needs.',
57+
image: colorMode === 'dark' ? CardImgDark : CardImgLight,
58+
sourceCode: `https://github.com/neo4j-labs/neo4j-needle-starterkit/blob/${
59+
import.meta.env.PACKAGE_VERSION
60+
}/src/templates/shared/components/Card.tsx`,
61+
previewLink: '/cards-preview',
62+
},
5163
];
5264

5365
return (

‎src/templates/shared/assets/cardImg.png

6.88 KB
Loading

‎src/templates/shared/components/Card.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ interface CardProps {
55
layout: 'vertical' | 'horizontal';
66
imageSrc?: string;
77
imageSize?: 'full' | 'small';
8+
iconSystem?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
89
children: ReactNode;
910
className?: string;
1011
}
@@ -25,7 +26,7 @@ const Card: React.FC<CardProps> & {
2526
Header: React.FC<CardHeaderProps>;
2627
Subheader: React.FC<CardSubheaderProps>;
2728
Content: React.FC<CardContentProps>;
28-
} = ({ layout, imageSrc, imageSize = 'small', children, className }) => {
29+
} = ({ layout, imageSrc, imageSize = 'small', iconSystem, children, className }) => {
2930
return (
3031
<Box
3132
className={`n-bg-palette-neutral-bg-weak border rounded-3xl shadow-lg mx-auto ${layout === 'horizontal' ? 'flex' : 'block'} ${className}`}
@@ -42,6 +43,11 @@ const Card: React.FC<CardProps> & {
4243
/>
4344
</div>
4445
)}
46+
{iconSystem && (
47+
<div className='p-4'>
48+
{React.createElement(iconSystem, { className: 'w-8 h-8' })}
49+
</div>
50+
)}
4551
<div className={`p-4 ${layout === 'horizontal' ? 'flex flex-col justify-between w-2/3' : ''}`}>
4652
{children}
4753
</div>
@@ -59,7 +65,7 @@ const Subheader: React.FC<CardSubheaderProps> = ({ children }) => (
5965
);
6066

6167
const Content: React.FC<CardContentProps> = ({ children }) => (
62-
<Typography variant="body-small">{children}</Typography>
68+
<Typography variant="body-small" className='flex flex-col gap-3'>{children}</Typography>
6369
);
6470

6571
Card.Header = Header;

‎src/templates/shared/components/DemoCards.tsx

+28-21
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Card from './Card';
22
import testImg from '../assets/cardImg.png';
33
import { Button, Typography } from '@neo4j-ndl/react';
4+
import { AcademicCapIconOutline, RocketLaunchIconOutline } from '@neo4j-ndl/react/icons';
45

56
export default function DemoCards() {
67
return (
@@ -9,21 +10,22 @@ export default function DemoCards() {
910
<Card.Header>Header text</Card.Header>
1011
<Card.Subheader>Subtitle or description</Card.Subheader>
1112
<Card.Content>
12-
<p>Some description about relatively important things but not too long since this is a card and not a novel. People won't read it if the description is too long.</p>
13+
<p>Some description about relatively important things but not too long since this is a card component.</p>
1314
<ul className="list-disc list-inside">
1415
<li>1 Key information</li>
1516
<li>12.59 Key information</li>
1617
<li>3 Key information</li>
1718
</ul>
18-
<Button><Typography variant="body-small">Test</Typography></Button>
19+
<div className='flex flex-row min-w-full justify-between'>
20+
<Button size='small' color='danger' className='w-2/5 mx-2.5'><Typography variant="body-small">Cancel</Typography></Button>
21+
<Button size='small' color='primary' className='w-2/5 mx-2.5'><Typography variant="body-small">Sign</Typography></Button>
22+
</div>
1923
</Card.Content>
2024
</Card>
21-
22-
<Card layout="horizontal" imageSrc={testImg} imageSize="full" className="h-60">
23-
<Card.Header>Header text</Card.Header>
24-
<Card.Subheader>Subtitle or description</Card.Subheader>
25+
26+
<Card layout="vertical" imageSrc={testImg} imageSize="full" className="h-auto w-96">
2527
<Card.Content>
26-
<p>Some description about relatively important things but not too long since this is a card and not a novel. People won't read it if the description is too long.</p>
28+
<p>Some description about relatively important things but not too long since this is a card component.</p>
2729
<ul className="list-disc list-inside">
2830
<li>18 Key information</li>
2931
<li>12.59 Key information</li>
@@ -32,53 +34,58 @@ export default function DemoCards() {
3234
</Card.Content>
3335
</Card>
3436

35-
<Card layout="vertical" className="h-60">
37+
<Card layout="vertical" className="h-auto w-96" iconSystem={RocketLaunchIconOutline}>
3638
<Card.Header>Header text</Card.Header>
37-
<Card.Subheader>Subtitle or description</Card.Subheader>
3839
<Card.Content>
39-
<p>Some description about relatively important things but not too long since this is a card and not a novel. People won't read it if the description is too long.</p>
40+
<p>Some description about relatively important things but not too long since this is a card component.</p>
4041
<ul className="list-disc list-inside">
41-
<li>1 Key information</li>
42+
<li>18 Key information</li>
4243
<li>12.59 Key information</li>
43-
<li>3 Key information</li>
44+
<li>5 Key information</li>
4445
</ul>
4546
</Card.Content>
4647
</Card>
47-
48-
<Card layout="horizontal" imageSrc={testImg} imageSize="small">
48+
49+
<Card layout="horizontal" imageSrc={testImg} imageSize="full" className="h-72">
4950
<Card.Header>Header text</Card.Header>
5051
<Card.Subheader>Subtitle or description</Card.Subheader>
5152
<Card.Content>
52-
<p>Some description about relatively important things but not too long since this is a card and not a novel. People won't read it if the description is too long.</p>
53+
<p>Some description about relatively important things but not too long since this is a card component.</p>
5354
<ul className="list-disc list-inside">
5455
<li>18 Key information</li>
5556
<li>12.59 Key information</li>
5657
<li>5 Key information</li>
5758
</ul>
59+
<div className='flex flex-row min-w-full justify-between'>
60+
<Button size='small' color='danger' className='w-2/5 mx-2.5'><Typography variant="body-small">Cancel</Typography></Button>
61+
<Button size='small' color='primary' className='w-2/5 mx-2.5'><Typography variant="body-small">Sign</Typography></Button>
62+
</div>
5863
</Card.Content>
5964
</Card>
6065

61-
<Card layout="horizontal" imageSrc={testImg} imageSize="full">
66+
<Card layout="horizontal" imageSrc={testImg} imageSize="full" className="h-44">
6267
<Card.Content>
63-
<p>Some description about relatively important things but not too long since this is a card and not a novel. People won't read it if the description is too long.</p>
68+
<p>Some description about relatively important things but not too long since this is a card component.</p>
6469
<ul className="list-disc list-inside">
65-
<li>18 Key information</li>
70+
<li>1 Key information</li>
6671
<li>12.59 Key information</li>
67-
<li>5 Key information</li>
72+
<li>3 Key information</li>
6873
</ul>
6974
</Card.Content>
7075
</Card>
7176

72-
<Card layout="vertical" imageSrc={testImg} imageSize="full" className="h-auto w-66">
77+
<Card layout="horizontal" iconSystem={AcademicCapIconOutline}>
78+
<Card.Header>Header text</Card.Header>
7379
<Card.Content>
74-
<p>Some description about relatively important things but not too long since this is a card and not a novel. People won't read it if the description is too long.</p>
80+
<p>Some description about relatively important things but not too long since this is a card component.</p>
7581
<ul className="list-disc list-inside">
7682
<li>18 Key information</li>
7783
<li>12.59 Key information</li>
7884
<li>5 Key information</li>
7985
</ul>
8086
</Card.Content>
8187
</Card>
88+
8289
</div>
8390
);
8491
}

0 commit comments

Comments
 (0)