martmullandGitHub
a9634b027e
For this front component using Avatar from `twenty-sdk/ui`
```typescript
import { defineFrontComponent } from 'twenty-sdk/define';
import { Avatar } from 'twenty-sdk/ui';
// React component - implement your UI here
const Component = () => {
return (
<div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
<Avatar avatarUrl={null} placeholder={'test'} />
<h1>My new component!</h1>
<p>This is your front component: fc-test</p>
</div>
);
};
export default defineFrontComponent({ ... });
```
## Before
<img width="3024" height="1964" alt="image"
src="https://github.com/user-attachments/assets/64479d9a-2316-4782-9552-c3982d85f97c"
/>
## After
<img width="1150" height="567" alt="image"
src="https://github.com/user-attachments/assets/67f34da2-a546-40e3-9f5d-62a5de6e4146"
/>