Skip to content

Commit

Permalink
docs:update templates
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lisa18289
Lisa18289 committed Nov 12, 2024
1 parent 236f0cb commit d3194ee
Showing 1 changed file with 147 additions and 84 deletions.
231 changes: 147 additions & 84 deletions packages/docs/src/content/01-get-started/templates/detail-page/examples/default.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import Text from "@mittwald/flow-react-components/Text";
import Button from "@mittwald/flow-react-components/Button";
import Section from "@mittwald/flow-react-components/Section";
import Content from "@mittwald/flow-react-components/Content";
import Link from "@mittwald/flow-react-components/Link";
import {
Modal,
ModalTrigger,
Expand Down Expand Up @@ -31,47 +30,88 @@ export default () => {
domain: "example.de",
type: "Domain",
ssl: undefined,
owner: {
firstName: "Max",
lastName: "Mustermann",
street: "Königsberger Str",
houseNumber: "4",
zip: "32339",
city: "Espelkamp",
},
};

const updateOwnerModal = (
<Modal>
<Heading>Domain-Inhaber bearbeiten</Heading>

<Content>
<Section>
<ColumnLayout>
<TextField isRequired defaultValue="Max">
<TextField
isRequired
defaultValue={domain.owner.firstName}
>
<Label>Vorname</Label>
</TextField>
<TextField isRequired defaultValue="Mustermann">
<TextField
isRequired
defaultValue={domain.owner.lastName}
>
<Label>Nachname</Label>
</TextField>
<ColumnLayout gap="s" s={[2, 1]}>
<TextField
isRequired
defaultValue="Königsberger Str"
defaultValue={domain.owner.street}
>
<Label>Straße</Label>
</TextField>
<TextField isRequired defaultValue="4">
<TextField
isRequired
defaultValue={domain.owner.houseNumber}
>
<Label>Hausnr.</Label>
</TextField>
</ColumnLayout>
<ColumnLayout gap="s" s={[1, 2]}>
<TextField isRequired defaultValue="32339">
<TextField
isRequired
defaultValue={domain.owner.zip}
>
<Label>PLZ</Label>
</TextField>
<TextField
isRequired
defaultValue="Espelkamp"
defaultValue={domain.owner.city}
>
<Label>Ort</Label>
</TextField>
</ColumnLayout>
</ColumnLayout>
</Section>
</Content>
<ActionGroup>
<Action closeOverlay="Modal">
<Button color="secondary" variant="soft">
Abbrechen
</Button>
<Button color="accent" type="submit">
Speichern
</Button>
</Action>
</ActionGroup>
</Modal>
);

const updateDomainTargetModal = (
<Modal>
<Heading>Domain-Ziel ändern</Heading>
<Content>
<Section>
<TextField isRequired>
<Label>Domain-Ziel</Label>
</TextField>
</Section>
</Content>
<ActionGroup>
<Action closeOverlay="Modal">
<Button color="secondary" variant="soft">
Expand All @@ -85,84 +125,107 @@ export default () => {
</Modal>
);

return (
<LayoutCard>
<Section>
{!domain.ssl && (
<Alert status="danger">
<Heading>
Es konnte kein SSL-Zertifikat ausgestellt
werden
</Heading>
<Content>
<Text>
Für diese Domain konnte kein SSL-Zertifikat
ausgestellt werden, da {domain.hostname}{" "}
nicht per DNS auf deine Server-IP zeigt.
Ändere den A-Record oder CNAME auf die
Server-IP zeigen. Es kann einige Minuten
dauern, bis das Zertifikat bei korrekten
Einstellungen ausgestellt ist.
</Text>
<Link>SSL-Zertifikat ausstellen</Link>
</Content>
</Alert>
)}
</Section>
<Section>
<Header>
<Heading>Domain-Details</Heading>
<ContextMenuTrigger>
<Button color="secondary" variant="soft">
<IconContextMenu />
const sslAlertSection = !domain.ssl && (
<Section>
<Alert status="danger">
<Heading>
Es konnte kein SSL-Zertifikat ausgestellt werden
</Heading>
<Content>
<Text>
Für diese Domain konnte kein SSL-Zertifikat
ausgestellt werden, da {domain.hostname} nicht
per DNS auf deine Server-IP zeigt. Ändere den
A-Record oder CNAME auf die Server-IP zeigen. Es
kann einige Minuten dauern, bis das Zertifikat
bei korrekten Einstellungen ausgestellt ist.
</Text>
<Action showFeedback>
<Button variant="plain">
SSL-Zertifikat ausstellen
</Button>
<ContextMenu>
<MenuItem>Domain umziehen</MenuItem>
<MenuItem>Domain entfernen</MenuItem>
</ContextMenu>
</ContextMenuTrigger>
</Action>
</Content>
</Alert>
</Section>
);

const domainDetailsSection = (
<Section>
<Header>
<Heading>Domain-Details</Heading>
<ContextMenuTrigger>
<Button color="secondary" variant="soft">
<IconContextMenu />
</Button>
<ContextMenu>
<MenuItem
onAction={() => alert("not implemented")}
>
Domain umziehen
</MenuItem>
<MenuItem
onAction={() => alert("not implemented")}
>
Domain entfernen
</MenuItem>
</ContextMenu>
</ContextMenuTrigger>
<ModalTrigger>
<Button>Domain-Ziel ändern</Button>
</Header>
<ColumnLayout s={[1, 1]}>
<LabeledValue>
<Label>Domain-Ziel</Label>
<Text>{domain.domain}</Text>
</LabeledValue>
<LabeledValue>
<Label>Zertifikat</Label>
<Text>{domain.ssl ? domain.ssl : "-"}</Text>
</LabeledValue>
</ColumnLayout>
</Section>
<Section>
<Header>
<Heading>Domain-Inhaber</Heading>
<ModalTrigger>
<Button color="secondary" variant="soft">
Bearbeiten
</Button>
{updateOwnerModal}
</ModalTrigger>
</Header>
<ColumnLayout>
<LabeledValue>
<Label>Inhaber</Label>
<Text>
Max Mustermann
<br />
Königsberger Str. 4, 32339 Espelkamp
</Text>
</LabeledValue>
<LabeledValue>
<Label>Kontaktdaten</Label>
<Text>
[email protected]
<br />
0163/123456789
</Text>
</LabeledValue>
</ColumnLayout>
</Section>
{updateDomainTargetModal}
</ModalTrigger>
</Header>
<ColumnLayout s={[1, 1]}>
<LabeledValue>
<Label>Domain-Ziel</Label>
<Text>{domain.domain}</Text>
</LabeledValue>
<LabeledValue>
<Label>Zertifikat</Label>
<Text>{domain.ssl ? domain.ssl : "-"}</Text>
</LabeledValue>
</ColumnLayout>
</Section>
);

const domainOwnerSection = (
<Section>
<Header>
<Heading>Domain-Inhaber</Heading>
<ModalTrigger>
<Button color="secondary" variant="soft">
Bearbeiten
</Button>
{updateOwnerModal}
</ModalTrigger>
</Header>
<ColumnLayout>
<LabeledValue>
<Label>Inhaber</Label>
<Text>
Max Mustermann
<br />
Königsberger Str. 4, 32339 Espelkamp
</Text>
</LabeledValue>
<LabeledValue>
<Label>Kontaktdaten</Label>
<Text>
[email protected]
<br />
0163/123456789
</Text>
</LabeledValue>
</ColumnLayout>
</Section>
);

return (
<LayoutCard>
{sslAlertSection}
{domainDetailsSection}
{domainOwnerSection}
</LayoutCard>
);
};

0 comments on commit d3194ee

Please sign in to comment.