admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Added new view to select types for objects (#6700)

Browse Source 
Issue #6496 
Hi team,

Is this the right approach for handling type selection with states and
conditional rendering, or should these be managed on separate pages
altogether? Please let me know Ill make changes accordingly :)

I’m also working on styling the buttons according to the Figma design
and will be moving constants like categoryDescriptions and categories to
the constants folder.

Thanks for your guidance!



https://github.com/user-attachments/assets/452bea9f-4d0a-4472-9941-421b54cda47f

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
nitin
2024-09-07 02:17:40 +05:30
committed by GitHub
parent 99f8f8fedb
commit 79aba75649
17 changed files with 597 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx
View File

@ -1,10 +1,14 @@
import styled from '@emotion/styled';
import { CSSProperties, Fragment } from 'react';
import { CSSProperties, Fragment, ReactNode } from 'react';
import { Link } from 'react-router-dom';
type BreadcrumbProps = {
className?: string;
links: { children: string; href?: string; styles?: CSSProperties }[];
links: {
href?: string;
styles?: CSSProperties;
children?: string | ReactNode;
}[];
};
const StyledWrapper = styled.nav`
@ -15,6 +19,7 @@ const StyledWrapper = styled.nav`
// font-weight: ${({ theme }) => theme.font.weight.semiBold};
gap: ${({ theme }) => theme.spacing(2)};
line-height: ${({ theme }) => theme.text.lineHeight.lg};
white-space: nowrap;
max-width: 100%;
min-width: 0;
`;
@ -34,21 +39,28 @@ const StyledText = styled.span`
white-space: nowrap;
`;
export const Breadcrumb = ({ className, links }: BreadcrumbProps) => (
<StyledWrapper className={className}>
{links.map((link, index) => (
<Fragment key={index}>
{link.href ? (
<StyledLink style={link.styles} title={link.children} to={link.href}>
{link.children}
</StyledLink>
) : (
<StyledText style={link.styles} title={link.children}>
{link.children}
</StyledText>
)}
{index < links.length - 1 && '/'}
</Fragment>
))}
</StyledWrapper>
);
// TODO: not sure that passing styles to the link is a good idea
export const Breadcrumb = ({ className, links }: BreadcrumbProps) => {
return (
<StyledWrapper className={className}>
{links.map((link, index) => {
const text = typeof link.children === 'string' ? link.children : '';
return (
<Fragment key={index}>
{link.href ? (
<StyledLink style={link.styles} title={text} to={link.href}>
{link.children}
</StyledLink>
) : (
<StyledText style={link.styles} title={text}>
{link.children}
</StyledText>
)}
{index < links.length - 1 && '/'}
</Fragment>
);
})}
</StyledWrapper>
);
};