diff --git a/app/assets/icons/group.svg b/app/assets/icons/group.svg new file mode 100644 index 00000000..ebccd859 --- /dev/null +++ b/app/assets/icons/group.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/components/ContentBox/box.css b/app/components/ContentBox/box.css index ee8fbc17..f92ba738 100644 --- a/app/components/ContentBox/box.css +++ b/app/components/ContentBox/box.css @@ -41,3 +41,13 @@ border-color: var(--colors-teal-200); text-decoration: none; } + +.content-box-table.main img { + width: fit-content; + height: -webkit-fill-available; +} +.content-box-table.main { + overflow: hidden; + padding: 0; + padding-right: var(--spacing-8); +} diff --git a/app/components/ContentBox/index.tsx b/app/components/ContentBox/index.tsx index c9451aa7..742ddbbc 100644 --- a/app/components/ContentBox/index.tsx +++ b/app/components/ContentBox/index.tsx @@ -5,6 +5,7 @@ import {GroupTopEcplise} from '~/components/icons-generated' import ListTable from '~/components/Table' import Button from '~/components/Button' import './box.css' +import SvgGroup from '~/components/icons-generated/Group' interface ContentBoxProps { title: string | ReactNode @@ -12,8 +13,16 @@ interface ContentBoxProps { actionTitle?: string | ReactNode children?: ReactNode className?: string + classNameTable?: string } -export const ContentBox = ({title, action, actionTitle, children, className}: ContentBoxProps) => { +export const ContentBox = ({ + title, + action, + actionTitle, + children, + className, + classNameTable = 'content-box-table', +}: ContentBoxProps) => { return (
@@ -22,7 +31,7 @@ export const ContentBox = ({title, action, actionTitle, children, className}: Co {actionTitle}
-
{children}
+
{children}
) } @@ -30,6 +39,7 @@ export const ContentBox = ({title, action, actionTitle, children, className}: Co export const ContentBoxMain = () => (
New to AI Safety?
@@ -72,9 +82,13 @@ export const ContentBoxSecond = () => { export const ContentBoxThird = () => { return ( - - - + + ) } diff --git a/app/components/icons-generated/Group.tsx b/app/components/icons-generated/Group.tsx new file mode 100644 index 00000000..cbd32815 --- /dev/null +++ b/app/components/icons-generated/Group.tsx @@ -0,0 +1,110 @@ +import * as React from 'react' +import type {SVGProps} from 'react' +const SvgGroup = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +) +export default SvgGroup