Skip to content

Commit

Permalink
feat: donor form
Browse files Browse the repository at this point in the history
* wip: donor form]

* feat: donor form

* fix: removing donor message typo
  • Loading branch information
danielhe4rt authored May 31, 2023
1 parent aa8575f commit 4ad7d5f
Show file tree
Hide file tree
Showing 8 changed files with 135 additions and 42 deletions.
79 changes: 79 additions & 0 deletions app/Http/Livewire/DonorForm.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<?php

namespace App\Http\Livewire;

use Filament\Forms;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Notifications\Notification;
use Livewire\Component;

class DonorForm extends Component implements HasForms
{
use InteractsWithForms;

public array $donation = [
'name' => '',
'email' => '',
'full_address' => '',
'job_title' => 'Developer/QA/PM',
'social_type' => '',
'social_url' => 'https://twitter.com/danielhe4rt'
];

public function render()
{
return view('livewire.donor-form');
}

public function mount()
{
$this->form->fill($this->donation);
}

protected function getFormSchema(): array
{
return [
Forms\Components\TextInput::make('name')
->label('Nome e Sobrenome')
->string()
->required(),
Forms\Components\TextInput::make('email')
->label('Seu Email')
->email()
->required(),
Forms\Components\TextInput::make('full_address')
->label('Local de Doação')
->placeholder('Cachoeira Paulista - SP / BR')
->required(),
Forms\Components\TextInput::make('job_title')
->label('Cargo/Titulo')
->placeholder('Desenvolvedor / Estudante')
->required(),
Forms\Components\Select::make('social_type')
->options([
'twitter' => 'Twitter',
'instagram' => 'Instagram',
'github' => 'Github',
'none' => 'Não uso rede social'
]),
Forms\Components\TextInput::make('social_url')
->placeholder('https://twitter.com/danielhe4rt')
->url(),
];
}

public function submit(): void
{
Notification::make()
->title('Obrigado pela doação!')
->body('Iremos revisar sua submissão e em breve estará em nosso site!')
->success()
->send();
}

public function getFormStatePath(): string
{
return 'donation';
}
}
8 changes: 8 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,8 @@
"postcss": "^8.4.24",
"tailwindcss": "^3.3.2",
"vite": "^4.0.0"
},
"dependencies": {
"@awcodes/alpine-floating-ui": "^3.5.0"
}
}
21 changes: 21 additions & 0 deletions resources/css/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,24 @@
@tailwind base;
@tailwind components;
@tailwind utilities;




.filament-forms-text-input-component {
@apply w-full p-2.5 !important;
}

.filament-forms-input {
@apply w-full px-5 py-4 text-gray-500 text-base bg-transparent border border-gray-800 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-500 resize-none rounded !important;
}

.filament-forms-component-container {
@apply w-full;
}

.filament-forms-input > select{
@apply w-full px-5 py-4 text-gray-500 text-base bg-transparent border border-gray-800 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-500 resize-none rounded !important;


}
4 changes: 2 additions & 2 deletions resources/js/app.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import Alpine from 'alpinejs'
import FormsAlpinePlugin from '../../vendor/filament/forms/dist/module.esm'
import AlpineFloatingUI from '@awcodes/alpine-floating-ui'
import NotificationsAlpinePlugin from '../../vendor/filament/notifications/dist/module.esm'

Alpine.plugin(FormsAlpinePlugin)
Alpine.plugin(AlpineFloatingUI)
Alpine.plugin(NotificationsAlpinePlugin)

window.Alpine = Alpine
Expand Down
14 changes: 14 additions & 0 deletions resources/views/livewire/donor-form.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<div class="w-full">
<form class="h-auto" wire:submit.prevent="submit">
{{ $this->form }}

<button
class="p-1 w-full font-heading font-semibold text-xs text-gray-900 uppercase tracking-px overflow-hidden rounded-md">
<div class="relative p-5 px-11 bg-gradient-green overflow-hidden rounded-md">
<div
class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
<p class="relative z-10">Send message</p>
</div>
</button>
</form>
</div>
42 changes: 7 additions & 35 deletions resources/views/welcome.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap">
<link rel="icon" type="image/png" sizes="32x32" href="shuffle-for-tailwind.png">
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireScripts
@livewireStyles
@livewire('notifications')
</head>
<body class="antialiased bg-body text-body font-body">
<div>
Expand Down Expand Up @@ -696,46 +699,15 @@ class="h-full p-0.5 bg-gradient-cyan transform hover:-translate-y-3 rounded-10 t
<section class="pt-24 pb-32 bg-black overflow-hidden">
<div class="container mx-auto px-4">
<div class="max-w-lg mx-auto text-center mb-14">
<h2 class="mb-5 font-heading font-semibold text-6xl sm:text-7xl text-white">Participe Agora!
</h2>
<h2 class="mb-5 font-heading font-semibold text-6xl sm:text-7xl text-white">Participe Agora!</h2>
<p class="text-gray-400 text-lg">Preencha o formulário com informações de onde você doará sangue e deixe
seu contato.
</p>
</div>

<div class="flex flex-wrap max-w-xl mx-auto -m-2.5">
<div class="w-full p-2.5">
<input
class="w-full px-5 py-4 text-gray-500 text-base bg-transparent border border-gray-800 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-500 rounded"
type="text" placeholder="Your full name">
</div>
<div class="w-full p-2.5">
<input
class="w-full px-5 py-4 text-gray-500 text-base bg-transparent border border-gray-800 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-500 rounded"
type="text" placeholder="Your email address">
</div>
<div class="w-full p-2.5"><textarea
class="w-full h-40 px-5 py-4 text-gray-500 text-base bg-transparent border border-gray-800 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-500 resize-none rounded"
type="text" placeholder="Write message"></textarea></div>
<div class="w-full p-2.5">
<div class="group relative">
<div
class="absolute top-0 left-0 w-full h-full bg-gradient-green opacity-0 group-hover:opacity-50 rounded-lg transition ease-out duration-300"></div>
<button
class="p-1 w-full font-heading font-semibold text-xs text-gray-900 uppercase tracking-px overflow-hidden rounded-md">
<div class="relative p-5 px-11 bg-gradient-green overflow-hidden rounded-md">
<div
class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
<p class="relative z-10">Send message</p>
</div>
</button>
</div>
</div>
<div class="w-full p-2.5">
<p class="text-sm text-gray-500 text-center">
<span>By clicking the send button, you agree with our</span>
<a class="pb-1 hover:text-gray-400 border-b border-gray-500" href="#">Terms &amp; Conditions</a>
</p>
</div>
<livewire:donor-form />

</div>
</div>
</section>
Expand Down
6 changes: 1 addition & 5 deletions vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,7 @@ export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
'app/Forms/Components/**',
],
refresh: [...refreshPaths, 'app/Http/Livewire/**'],
}),
],
})

0 comments on commit 4ad7d5f

Please sign in to comment.