This component renders inside Twenty.
User: {userId}
Record: {recordId ?? 'No record context'}
Component: {componentId}
Archive this record?
;
export default defineFrontComponent({
universalIdentifier: '...',
name: 'logo',
component: Logo,
});
```
Podrobnosti viz [sekci veřejných souborů](#accessing-public-assets-with-getpublicasseturl).
#### Styling
Frontendové komponenty podporují více přístupů ke stylování. Můžete použít:
* **Inline styly** — `style={{ color: 'red' }}`
* **Komponenty Twenty UI** — import z `twenty-sdk/ui` (Button, Tag, Status, Chip, Avatar a další)
* **Emotion** — CSS-in-JS s `@emotion/react`
* **Styled-components** — vzory `styled.div`
* **Tailwind CSS** — utilitní třídy
* **Jakákoli CSS-in-JS knihovna** kompatibilní s Reactem
```tsx
import { defineFrontComponent } from 'twenty-sdk';
import { Button, Tag, Status } from 'twenty-sdk/ui';
const StyledWidget = () => {
return (
Today is {format(new Date(), 'MMMM do, yyyy')}
; }; export default defineFrontComponent({ universalIdentifier: '...', name: 'date-widget', component: DateWidget, }); ``` ### Jak funguje bundlování Krok sestavení používá esbuild k vytvoření jediného samostatného souboru pro každou logickou funkci a každou frontendovou komponentu. Všechny importované balíčky jsou vloženy přímo do bundlu. **Logické funkce** běží v prostředí Node.js. Vestavěné moduly Node (`fs`, `path`, `crypto`, `http` atd.) jsou k dispozici a není je třeba instalovat. **Frontendové komponenty** běží ve Web Workeru. Vestavěné moduly Node nejsou k dispozici — pouze prohlížečová API a balíčky npm, které fungují v prohlížečovém prostředí. V obou prostředích jsou jako předpřipravené moduly k dispozici `twenty-client-sdk/core` a `twenty-client-sdk/metadata` — nejsou součástí bundlu, ale server je za běhu načítá. ## Generování entit pomocí `yarn twenty add` Místo ručního vytváření souborů entit můžete použít interaktivní generátor: ```bash filename="Terminal" yarn twenty add ``` Požádá vás o výběr typu entity a provede vás požadovanými poli. Vygeneruje soubor připravený k použití se stabilním `universalIdentifier` a správným voláním `defineEntity()`. Můžete také předat typ entity přímo a přeskočit první dotaz: ```bash filename="Terminal" yarn twenty add object yarn twenty add logicFunction yarn twenty add frontComponent ``` ### Dostupné typy entit | Typ entity | Příkaz | Vygenerovaný soubor | | ------------------------- | ------------------------------------ | ------------------------------------- | | Objekt | `yarn twenty add object` | `src/objects/