[react-ui] ProfileCard component implementation

packages/libs/react-ui/src/components/ContentHeader/ContentHeader.tsx

@@ -11,6 +11,7 @@ export interface IContentHeaderProps {
 }
 
 export const ContentHeader: FC<IContentHeaderProps> = ({
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   icon: Icon,
   heading,
   description,

packages/libs/react-ui/src/components/ProfileCard/ProfileCard.css.ts

@@ -0,0 +1,85 @@
+import { sprinkles } from '@theme/sprinkles.css';
+import { style } from '@vanilla-extract/css';
+
+export const imageContainerClass = style([
+  sprinkles({
+    borderRadius: '$round',
+    overflow: 'hidden',
+    width: '100%',
+  }),
+]);
+
+export const imageClass = style([
+  sprinkles({
+    width: '100%',
+    height: '100%',
+    borderRadius: '$round',
+  }),
+  {
+    objectFit: 'cover',
+  },
+]);
+
+export const boldTextClass = style([
+  sprinkles({
+    marginY: '$2',
+    fontWeight: '$bold',
+  }),
+]);
+
+const ulClass = style([
+  sprinkles({
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    marginX: 0,
+    marginY: '$2',
+    padding: 0,
+  }),
+]);
+
+export const tagContainerClass = style([
+  ulClass,
+  sprinkles({
+    flexDirection: 'row',
+  }),
+  {
+    listStyleType: 'none',
+  },
+]);
+
+export const linkContainerClass = style([
+  ulClass,
+  sprinkles({
+    flexDirection: 'column',
+    marginLeft: '$4',
+  }),
+  {},
+]);
+
+export const linkClass = style([
+  sprinkles({
+    color: '$blue80',
+
+    textDecoration: 'none',
+  }),
+  {
+    selectors: {
+      '&:hover': {
+        textDecoration: 'underline',
+      },
+    },
+  },
+]);
+
+export const tagClass = style([
+  sprinkles({
+    margin: '$1',
+  }),
+]);
+
+export const profileCardClass = style([
+  sprinkles({
+    color: '$foreground',
+  }),
+]);

packages/libs/react-ui/src/components/ProfileCard/ProfileCard.stories.tsx

@@ -0,0 +1,79 @@
+import { Grid } from '@components/Grid';
+import { IProfileCardProps, ProfileCard } from '@components/ProfileCard';
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+const meta: Meta<IProfileCardProps> = {
+  title: 'Components/ProfileCard',
+  component: ProfileCard,
+  argTypes: {
+    name: {
+      control: {
+        type: 'text',
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+    },
+
+    imageSrc: {
+      control: {
+        type: 'text',
+      },
+    },
+    tags: {
+      control: {
+        type: 'array',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<IProfileCardProps>;
+
+export const Primary: Story = {
+  name: 'ProfileCard',
+  args: {
+    name: 'Tasos Bitsios',
+    title: 'Developer Experience Developer (DED)',
+    tags: ['Chainweb-stream', 'SSE'],
+    imageSrc: 'https://avatars.githubusercontent.com/u/115649719?v=4',
+    links: {
+      'Personal website': 'https://tasosbitsios.com',
+      Twitter: 'https://twitter.com/tasosbitsios',
+      'Custom link': 'https://kadena.io',
+    },
+  },
+  render: ({ name, title, tags, imageSrc, links }) => {
+    return (
+      <Grid.Root columns={12}>
+        <Grid.Item columnSpan={6}>
+          <ProfileCard
+            name={'Tasos Bitsios'}
+            title={'Developer Experience Developer (DED)'}
+            tags={['Chainweb-stream', 'SSE']}
+            imageSrc={'https://avatars.githubusercontent.com/u/115649719?v=4'}
+            links={{
+              'Personal website': 'https://tasosbitsios.com',
+              Twitter: 'https://twitter.com/tasosbitsios',
+              'Custom link': 'https://kadena.io',
+            }}
+          />
+        </Grid.Item>
+        <Grid.Item columnSpan={6}>
+          <ProfileCard
+            name={name}
+            title={title}
+            tags={tags}
+            imageSrc={imageSrc}
+            links={links}
+          />
+        </Grid.Item>
+      </Grid.Root>
+    );
+  },
+};

packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx

@@ -0,0 +1,72 @@
+import {
+  boldTextClass,
+  imageClass,
+  imageContainerClass,
+  linkClass,
+  linkContainerClass,
+  profileCardClass,
+  tagClass,
+  tagContainerClass,
+} from './ProfileCard.css';
+
+import { Grid } from '@components/Grid';
+import { Tag } from '@components/Tag';
+import React, { FC } from 'react';
+
+export default {};
+export interface IProfileCardProps {
+  name: string;
+  title: string;
+  imageSrc: string;
+  tags?: string[];
+  links?: Record<string, string>;
+}
+
+export const ProfileCard: FC<IProfileCardProps> = ({
+  name,
+  title,
+  imageSrc,
+  tags = undefined,
+  links = undefined,
+}) => {
+  return (
+    <div className={profileCardClass}>
+      <Grid.Root columns={12}>
+        <Grid.Item columnSpan={2}>
+          <div className={imageContainerClass}>
+            <img className={imageClass} src={imageSrc} alt={name} />
+          </div>
+        </Grid.Item>
+        <Grid.Item columnSpan={10}>
+          <p className={boldTextClass}>{name}</p>
+          <p>{title}</p>
+
+          {tags && (
+            <ul className={tagContainerClass}>
+              {tags.map((tag, i) => (
+                <li className={tagClass} key={i}>
+                  <Tag key={i}>{tag}</Tag>
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {links && (
+            <>
+              <p className={boldTextClass}>Links</p>
+              <ul className={linkContainerClass}>
+                {Object.entries(links).map(([text, href]) => (
+                  <li key={text}>
+                    <a className={linkClass} href={href}>
+                      {text}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+        </Grid.Item>
+      </Grid.Root>
+    </div>
+  );
+};

packages/libs/react-ui/src/components/ProfileCard/index.ts

@@ -0,0 +1,4 @@
+import type { IProfileCardProps } from './ProfileCard';
+import { ProfileCard } from './ProfileCard';
+
+export { IProfileCardProps, ProfileCard };

packages/libs/react-ui/src/components/Table/Table.stories.tsx

@@ -109,7 +109,6 @@ export const LinkTable: Story = {
 };
 
 export const StripedTable: Story = {
-  name: 'Striped Table',
   args: {
     rowCount: 3,
     columnCount: 5,

packages/libs/react-ui/src/components/index.ts

@@ -47,6 +47,7 @@ export type {
   IGradientTextProps,
   ILabelProps,
 } from './Typography';
+export type { IProfileCardProps } from './ProfileCard';
 
 export { Accordion } from './Accordion';
 export { Box } from './Box';
@@ -77,3 +78,4 @@ export { Tooltip } from './Tooltip';
 export { TrackerCard } from './TrackerCard/TrackerCard';
 export { Tree } from './Tree';
 export { Divider } from './Divider/Divider';
+export { ProfileCard } from './ProfileCard';

packages/libs/react-ui/src/index.ts

@@ -48,6 +48,7 @@ export type {
   ITrackerCardProps,
   ITreeProps,
   ITrProps,
+  IProfileCardProps,
 } from './components';
 
 export {
@@ -86,6 +87,7 @@ export {
   Tree,
   useModal,
   Divider,
+  ProfileCard,
 } from './components';
 
 export { breakpoints } from './styles';