make it customalble for daisy

init-template
ajikamaludin 2 years ago
parent 3698ab4062
commit 2ee3e850bd
No known key found for this signature in database
GPG Key ID: E4F565A376B260B7

@ -2,6 +2,6 @@ import React from 'react';
export default function ApplicationLogo({ className }) {
return (
<p>Monitor Doc</p>
<p className={className}>Monitor Doc</p>
);
}

@ -6,7 +6,7 @@ export default function Checkbox({ name, value, handleChange }) {
type="checkbox"
name={name}
value={value}
className="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
className="rounded text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
onChange={(e) => handleChange(e)}
/>
);

@ -30,7 +30,7 @@ const Trigger = ({ children }) => {
);
};
const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-white', children }) => {
const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-base-100', children }) => {
const { open, setOpen } = useContext(DropDownContext);
let alignmentClasses = 'origin-top';
@ -76,7 +76,7 @@ const DropdownLink = ({ href, method = 'post', as = 'a', children }) => {
href={href}
method={method}
as={as}
className="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
className="block w-full px-4 py-2 text-left text-sm leading-5 hover:bg-base-200 focus:outline-none transition duration-150 ease-in-out"
>
{children}
</Link>

@ -2,7 +2,7 @@ import React from 'react';
export default function InputLabel({ forInput, value, className, children }) {
return (
<label htmlFor={forInput} className={`block font-medium text-sm text-gray-700 ` + className}>
<label htmlFor={forInput} className={`block font-medium text-sm ` + className}>
{value ? value : children}
</label>
);

@ -10,7 +10,7 @@ export default function ModalConfirm(props) {
return (
<div
className="modal"
className="modal modal-bottom sm:modal-middle pb-10"
style={
isOpen
? {

@ -4,7 +4,7 @@ import { Link } from '@inertiajs/inertia-react'
export default function MenuItem({ routeName, name, active }) {
return (
<li>
<Link href={route(routeName)} className={`flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white ${route().current(active) ? 'bg-gray-100' : 'hover:bg-gray-100'} dark:hover:bg-gray-700`}>
<Link href={route(routeName)} className={`flex items-center p-2 text-base font-normal rounded-lg ${route().current(active) ? 'bg-base-200' : 'hover:bg-base-200'} `}>
<span className="ml-3">{name}</span>
</Link>
</li>

@ -10,14 +10,14 @@ export default function Authenticated({ auth, children }) {
const [showingNavigationDropdown, setShowingNavigationDropdown] = useState(false);
return (
<div className="min-h-screen bg-gray-100">
<nav className="bg-white border-b border-gray-100">
<div className="min-h-screen bg-base-200">
<nav className="bg-base-100 border-b border-base-100">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16">
<div className="flex">
<div className="shrink-0 flex items-center">
<Link href="/">
<ApplicationLogo className="block h-9 w-auto text-gray-500" />
<ApplicationLogo className="block h-9 w-auto" />
</Link>
</div>
@ -35,7 +35,7 @@ export default function Authenticated({ auth, children }) {
<span className="inline-flex rounded-md">
<button
type="button"
className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150"
className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md bg-base-100 focus:outline-none transition ease-in-out duration-150"
>
{auth.user.name}
@ -121,7 +121,7 @@ export default function Authenticated({ auth, children }) {
<div className='flex flex-row md:mt-5 max-w-7xl mx-auto'>
<div className='w-auto hidden md:block'>
<aside className="ml-5 w-64" aria-label="Sidebar">
<div className="overflow-y-auto py-4 px-3 bg-white rounded dark:bg-gray-800">
<div className="overflow-y-auto py-4 px-3 bg-base-100 rounded">
<ul className="space-y-2">
<MenuItem routeName='dashboard' active='dashboard' name='Dashboard' />
<MenuItem routeName='docs.index' active='docs.*' name='Monitoring' />

@ -4,14 +4,8 @@ import { Link } from '@inertiajs/inertia-react';
export default function Guest({ children }) {
return (
<div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
<div>
<Link href="/">
<ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
</Link>
</div>
<div className="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
<div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-base-200">
<div className="card bg-base-100 w-full sm:max-w-md mt-6 px-6 py-4 shadow-md overflow-hidden sm:rounded-lg">
{children}
</div>
</div>

@ -6,6 +6,7 @@ import InputLabel from '@/Components/InputLabel';
import PrimaryButton from '@/Components/PrimaryButton';
import TextInput from '@/Components/TextInput';
import { Head, Link, useForm } from '@inertiajs/inertia-react';
import ApplicationLogo from '@/Components/ApplicationLogo';
export default function Login({ status, canResetPassword }) {
const { data, setData, post, processing, errors, reset } = useForm({
@ -34,6 +35,11 @@ export default function Login({ status, canResetPassword }) {
<GuestLayout>
<Head title="Log in" />
<div className='mx-auto mt-5 mb-10'>
<Link href="/">
<ApplicationLogo className="font-bold text-2xl" />
</Link>
</div>
{status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
<form onSubmit={submit}>
@ -72,7 +78,7 @@ export default function Login({ status, canResetPassword }) {
<label className="flex items-center">
<Checkbox name="remember" value={data.remember} handleChange={onHandleChange} />
<span className="ml-2 text-sm text-gray-600">Remember me</span>
<span className="ml-2 text-sm ">Remember me</span>
</label>
</div>

@ -11,8 +11,8 @@ export default function Dashboard(props) {
<Head title="Dashboard" />
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div className="p-6 bg-white border-b border-gray-200">You're logged in!</div>
<div className="bg-base-100 overflow-hidden shadow-sm">
<div className="p-6 bg-base-100 border-b border-base-200">You're logged in!</div>
</div>
</div>
</AuthenticatedLayout>

@ -55,83 +55,77 @@ export default function Users(props) {
<AuthenticatedLayout
auth={props.auth}
errors={props.errors}
header={
<h2 className="font-semibold text-xl text-gray-800 leading-tight">
Users
</h2>
}
>
<Head title="Users" />
<div className="">
<div className="flex flex-col w-full sm:px-6 lg:px-8 space-y-2">
<div className="card bg-white w-full">
<div className="card-body">
<div className="flex w-full mb-4 justify-between">
<div
className="btn btn-neutral"
onClick={() => toggle()}
>
Tambah
</div>
<div className="form-control">
<input
type="text"
className="input input-bordered"
value={search}
onChange={(e) =>
setSearch(e.target.value)
}
placeholder="Search"
/>
</div>
<div className="flex flex-col w-full sm:px-6 lg:px-8 space-y-2">
<div className="card bg-base-100 w-full">
<div className="card-body">
<div className="flex w-full mb-4 justify-between">
<div
className="btn btn-neutral"
onClick={() => toggle()}
>
Tambah
</div>
<div className="overflow-x-auto">
<table className="table w-full table-zebra">
<thead>
<tr>
<th>Id</th>
<th>Nama</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
{users?.map((user) => (
<tr key={user.id}>
<th>{user.id}</th>
<td>{user.name}</td>
<td>{user.email}</td>
<td className="text-right">
<div className="form-control">
<input
type="text"
className="input input-bordered"
value={search}
onChange={(e) =>
setSearch(e.target.value)
}
placeholder="Search"
/>
</div>
</div>
<div className="overflow-x-auto">
<table className="table w-full table-zebra">
<thead>
<tr>
<th>Id</th>
<th>Nama</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
{users?.map((user) => (
<tr key={user.id}>
<th>{user.id}</th>
<td>{user.name}</td>
<td>{user.email}</td>
<td className="text-right">
<div
className="btn btn-primary mx-1"
onClick={() =>
toggle(user)
}
>
Edit
</div>
{props.auth.user.id !==
user.id && (
<div
className="btn btn-primary mx-1"
className="btn btn-secondary mx-1"
onClick={() =>
toggle(user)
handleDelete(user)
}
>
Edit
Delete
</div>
{props.auth.user.id !==
user.id && (
<div
className="btn btn-secondary mx-1"
onClick={() =>
handleDelete(user)
}
>
Delete
</div>
)}
</td>
</tr>
))}
</tbody>
</table>
</div>
<Pagination links={links} />
)}
</td>
</tr>
))}
</tbody>
</table>
</div>
<Pagination links={links} />
</div>
</div>
</div>
<UserFormModal
isOpen={formModal.isOpen}
toggle={toggle}

@ -56,7 +56,7 @@ export default function UserFormModal(props) {
return (
<div
className="modal"
className="modal modal-bottom sm:modal-middle pb-10"
style={
isOpen
? {

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-theme="corporate">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

@ -21,4 +21,8 @@ module.exports = {
require('@tailwindcss/forms'),
require("daisyui")
],
daisyui: {
themes: ["light", "dark", "corporate"],
},
};

Loading…
Cancel
Save