tomru/pdfer
1
0
Fork 0
mirror of https://github.com/tomru/pdfer.git synced 2026-03-02 22:17:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

more styling

Browse Source
This commit is contained in:
Thomas Ruoff
2021-02-28 23:28:05 +01:00
parent fcb453b243
commit 0aaccf6966
7 changed files with 53 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/App.tsx
View File

@@ -7,8 +7,6 @@ import { generatePdf, getLatest, removeLatest } from './apiHelper'
import { ILatest } from '../interfaces/ILatest'
import { IDocProps } from '../interfaces/IDocProps'
//import './App.css';
export default function App() {
const [options, setOptions] = useState<IDocProps>({
address: 'Max Mustermann\nMusterstrasse\n12345 Musterstadt',
@@ -79,20 +77,16 @@ export default function App() {
}
return (
<div className="flex flex-col space-x-5 py-3 sm:px-2 lg:px-3 bg-gray-100">
<div className="flex space-x-5">
<div className=" flex-grow flex flex-col shadow sm:rounded-md sm:overflow-hidden">
<LetterOptions onChange={_onChange} {...options} />
<div className="flex space-x-3 p-3">
<Button onClick={_onGenerate}>PDF Erstellen</Button>
<Button onClick={_onClear}>Alles Löschen</Button>
</div>
<div className="flex space-x-5 py-3 sm:px-2 lg:px-3 bg-gray-100">
<div className=" flex-grow flex flex-col shadow sm:rounded-md sm:overflow-hidden">
<LetterOptions onChange={_onChange} {...options} />
<div className="flex space-x-3 p-3">
<Button onClick={_onGenerate}>PDF Erstellen</Button>
<Button onClick={_onClear}>Alles Löschen</Button>
</div>
<LatestList latest={latest} onSelect={_onSelectLatest} onRemove={_onRemoveLatest} />
</div>
<div className="flex flex-col space-y-5">
<Preview pdfUrl={pdfUrl} pdfIsLoading={pdfIsLoading} pdfError={pdfError} />
</div>
<LatestList latest={latest} onSelect={_onSelectLatest} onRemove={_onRemoveLatest} />
</div>
)
}

2
components/Button.tsx
View File

@@ -11,7 +11,7 @@ export default function Button({
<button
type="button"
onClick={onClick}
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
className="inline-flex items-center px-2 py-1 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
{children}
</button>

6
components/Input.tsx
View File

@@ -15,14 +15,14 @@ export default function Input({
}) {
return (
<>
<label htmlFor={name} className="block text-sm font-medium text-gray-700">
<label htmlFor={name} className="pb-label">
{text}
</label>
<div className="mt-1 flex rounded-md shadow-sm">
<div className="pb-input_wrapper">
<input
type="text"
name={name}
className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300"
className="pb-input"
placeholder={placeholder}
value={value}
onChange={onchange.bind(null, name)}

25
components/LatestList.tsx
View File

@@ -1,6 +1,5 @@
import React from 'react'
import { ILatest } from '../interfaces/ILatest'
import Button from './Button'
export default function LatestList({
latest,
@@ -19,19 +18,29 @@ export default function LatestList({
const subject = item.subject
const hrefId = `#item-${item.id}`
return (
<li key={item.id}>
<a href={hrefId} onClick={() => onSelect(item)}>
<div>{subject}</div>
<div>{created.toLocaleDateString()}</div>
</a>
<Button onClick={() => onRemove(item)}>Remove</Button>
<li key={item.id} className="flex flex-col">
<hr className="border-gray-200 mt-3 mb-4" />
<div className="flex flex-row items-center">
<a href={hrefId} onClick={() => onSelect(item)}>
<div className="text-base">{subject}</div>
<div className="text-sm">{created.toLocaleString()}</div>
</a>
<a
className="m-2 text-gray-400 hover:text-gray-600 cursor-pointer"
onClick={() => onRemove(item)}
href="#"
title="Löschen"
>
❌
</a>
</div>
</li>
)
})
return (
<div>
<h4>Vergangene Briefe:</h4>
<h4 className="text-lg mb-4">Vergangene Briefe:</h4>
<ul>{latestElements}</ul>
</div>
)

9
components/Select.tsx
View File

@@ -15,15 +15,10 @@ export default function Select({
}) {
return (
<>
<label htmlFor={name} className="block text-sm font-medium text-gray-700">
<label htmlFor={name} className="pb-label">
{text}
</label>
<select
name={name}
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
onChange={onchange.bind(null, name)}
value={value}
>
<select name={name} className="pb-select" onChange={onchange.bind(null, name)} value={value}>
{options.map((option) => (
<option value={option.value} key={option.value}>
{option.name}

4
components/TextAreaInput.tsx
View File

@@ -17,7 +17,7 @@ export default function TextAreaInput({
}) {
return (
<>
<label htmlFor={name} className="block text-sm font-medium text-gray-700">
<label htmlFor={name} className="pb-label">
{text}
</label>
<div className="mt-1">
@@ -25,7 +25,7 @@ export default function TextAreaInput({
id="about"
name="about"
rows={10}
className={`shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md ${styles}`}
className={`pb-textarea ${styles}`}
placeholder={placeholder}
onChange={onchange.bind(null, name)}
value={value}

21
styles/index.css
View File

@@ -2,6 +2,26 @@
@tailwind components;
@tailwind utilities;
.pb-label {
@apply block text-sm font-medium text-gray-700;
}
.pb-textarea {
@apply shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md;
}
.pb-select {
@apply mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm;
}
.pb-input_wrapper {
@apply mt-1 flex rounded-md shadow-sm;
}
.pb-input {
@apply focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-md sm:text-sm border-gray-300;
}
.Collapsible {
background-color: #ddd;
border-radius: 2px;
@@ -31,4 +51,5 @@
background-color: #fff;
padding-top: 12px;
padding-left: 12px;
padding-right: 2px;
}