refactor client layout
This commit is contained in:
parent
64736977cd
commit
3f3df221c8
26
web/src/components/FooterBar/FooterBar.stories.tsx
Normal file
26
web/src/components/FooterBar/FooterBar.stories.tsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
// Pass props to your component by passing an `args` object to your story
|
||||||
|
//
|
||||||
|
// ```tsx
|
||||||
|
// export const Primary: Story = {
|
||||||
|
// args: {
|
||||||
|
// propName: propValue
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ```
|
||||||
|
//
|
||||||
|
// See https://storybook.js.org/docs/react/writing-stories/args.
|
||||||
|
|
||||||
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
|
||||||
|
import FooterBar from './FooterBar'
|
||||||
|
|
||||||
|
const meta: Meta<typeof FooterBar> = {
|
||||||
|
component: FooterBar,
|
||||||
|
tags: ['autodocs'],
|
||||||
|
}
|
||||||
|
|
||||||
|
export default meta
|
||||||
|
|
||||||
|
type Story = StoryObj<typeof FooterBar>
|
||||||
|
|
||||||
|
export const Primary: Story = {}
|
||||||
14
web/src/components/FooterBar/FooterBar.test.tsx
Normal file
14
web/src/components/FooterBar/FooterBar.test.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { render } from '@redwoodjs/testing/web'
|
||||||
|
|
||||||
|
import FooterBar from './FooterBar'
|
||||||
|
|
||||||
|
// Improve this test with help from the Redwood Testing Doc:
|
||||||
|
// https://redwoodjs.com/docs/testing#testing-components
|
||||||
|
|
||||||
|
describe('FooterBar', () => {
|
||||||
|
it('renders successfully', () => {
|
||||||
|
expect(() => {
|
||||||
|
render(<FooterBar />)
|
||||||
|
}).not.toThrow()
|
||||||
|
})
|
||||||
|
})
|
||||||
88
web/src/components/FooterBar/FooterBar.tsx
Normal file
88
web/src/components/FooterBar/FooterBar.tsx
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
const FooterBar = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<footer className="footer bg-base-200 p-10 text-base-content">
|
||||||
|
<nav>
|
||||||
|
<h6 className="footer-title">Services</h6>
|
||||||
|
<a className="link-hover link">Branding</a>
|
||||||
|
<a className="link-hover link">Design</a>
|
||||||
|
<a className="link-hover link">Marketing</a>
|
||||||
|
<a className="link-hover link">Advertisement</a>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<h6 className="footer-title">Company</h6>
|
||||||
|
<a className="link-hover link">About us</a>
|
||||||
|
<a className="link-hover link">Contact</a>
|
||||||
|
<a className="link-hover link">Jobs</a>
|
||||||
|
<a className="link-hover link">Press kit</a>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<h6 className="footer-title">Legal</h6>
|
||||||
|
<a className="link-hover link">Terms of use</a>
|
||||||
|
<a className="link-hover link">Privacy policy</a>
|
||||||
|
<a className="link-hover link">Cookie policy</a>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
<footer className="footer fixed bottom-0 border-t border-base-300 bg-base-200 px-10 py-4 text-base-content">
|
||||||
|
<aside className="grid-flow-col items-center">
|
||||||
|
<svg
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fillRule="evenodd"
|
||||||
|
clipRule="evenodd"
|
||||||
|
className="fill-current"
|
||||||
|
>
|
||||||
|
<path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>
|
||||||
|
</svg>
|
||||||
|
<p>
|
||||||
|
ACME Industries Ltd.
|
||||||
|
<br />
|
||||||
|
Providing reliable tech since 1992
|
||||||
|
</p>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<nav className="md:place-self-center md:justify-self-end">
|
||||||
|
<div className="grid grid-flow-col gap-4">
|
||||||
|
<a>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
className="fill-current"
|
||||||
|
>
|
||||||
|
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
className="fill-current"
|
||||||
|
>
|
||||||
|
<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
className="fill-current"
|
||||||
|
>
|
||||||
|
<path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FooterBar
|
||||||
26
web/src/components/HeaderBar/HeaderBar.stories.tsx
Normal file
26
web/src/components/HeaderBar/HeaderBar.stories.tsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
// Pass props to your component by passing an `args` object to your story
|
||||||
|
//
|
||||||
|
// ```tsx
|
||||||
|
// export const Primary: Story = {
|
||||||
|
// args: {
|
||||||
|
// propName: propValue
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ```
|
||||||
|
//
|
||||||
|
// See https://storybook.js.org/docs/react/writing-stories/args.
|
||||||
|
|
||||||
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
|
||||||
|
import HeaderBar from './HeaderBar'
|
||||||
|
|
||||||
|
const meta: Meta<typeof HeaderBar> = {
|
||||||
|
component: HeaderBar,
|
||||||
|
tags: ['autodocs'],
|
||||||
|
}
|
||||||
|
|
||||||
|
export default meta
|
||||||
|
|
||||||
|
type Story = StoryObj<typeof HeaderBar>
|
||||||
|
|
||||||
|
export const Primary: Story = {}
|
||||||
14
web/src/components/HeaderBar/HeaderBar.test.tsx
Normal file
14
web/src/components/HeaderBar/HeaderBar.test.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { render } from '@redwoodjs/testing/web'
|
||||||
|
|
||||||
|
import HeaderBar from './HeaderBar'
|
||||||
|
|
||||||
|
// Improve this test with help from the Redwood Testing Doc:
|
||||||
|
// https://redwoodjs.com/docs/testing#testing-components
|
||||||
|
|
||||||
|
describe('HeaderBar', () => {
|
||||||
|
it('renders successfully', () => {
|
||||||
|
expect(() => {
|
||||||
|
render(<HeaderBar />)
|
||||||
|
}).not.toThrow()
|
||||||
|
})
|
||||||
|
})
|
||||||
101
web/src/components/HeaderBar/HeaderBar.tsx
Normal file
101
web/src/components/HeaderBar/HeaderBar.tsx
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
import { Link, routes } from '@redwoodjs/router'
|
||||||
|
|
||||||
|
import { useAuth } from 'src/auth'
|
||||||
|
import ThemeChanger from 'src/components/ThemeChanger/ThemeChanger'
|
||||||
|
|
||||||
|
const HeaderBar = () => {
|
||||||
|
const { logOut } = useAuth()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="navbar bg-base-100">
|
||||||
|
<div className="flex-1">
|
||||||
|
<a className="btn btn-ghost text-xl">Pendantator</a>
|
||||||
|
</div>
|
||||||
|
<div className="flex-none">
|
||||||
|
<ul className="menu menu-horizontal px-1">
|
||||||
|
<li>
|
||||||
|
<Link to={routes.home()}>Home</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<details>
|
||||||
|
<summary>Parent</summary>
|
||||||
|
<ul className="rounded-t-none bg-base-100 p-2">
|
||||||
|
<li>
|
||||||
|
<a>Link 1</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Link 2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="dropdown dropdown-end">
|
||||||
|
<div tabIndex={0} role="button" className="btn btn-circle btn-ghost">
|
||||||
|
<div className="indicator">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="h-5 w-5"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="badge indicator-item badge-sm">8</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card dropdown-content card-compact z-[1] mt-3 w-52 bg-base-100 shadow">
|
||||||
|
<div className="card-body">
|
||||||
|
<span className="text-lg font-bold">8 Items</span>
|
||||||
|
<span className="text-info">Subtotal: $999</span>
|
||||||
|
<div className="card-actions">
|
||||||
|
<button className="btn btn-primary btn-block">View cart</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="dropdown dropdown-end">
|
||||||
|
<div
|
||||||
|
tabIndex={0}
|
||||||
|
role="button"
|
||||||
|
className="avatar btn btn-circle btn-ghost"
|
||||||
|
>
|
||||||
|
<div className="w-10 rounded-full">
|
||||||
|
<img
|
||||||
|
alt="Tailwind CSS Navbar component"
|
||||||
|
src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul className="menu dropdown-content menu-sm z-[1] mt-3 w-52 rounded-box bg-base-100 p-2 shadow">
|
||||||
|
<li>
|
||||||
|
<a className="justify-between">
|
||||||
|
Profile
|
||||||
|
<span className="badge">New</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Settings</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<ThemeChanger />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link onClick={logOut} to={routes.home()}>
|
||||||
|
Logout
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HeaderBar
|
||||||
@ -1,9 +1,31 @@
|
|||||||
const SideBar = () => {
|
const SideBar = () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<>
|
||||||
<h2>{'SideBar'}</h2>
|
<div className="drawer fixed top-20">
|
||||||
<p>{'Find me in ./web/src/components/SideBar/SideBar.tsx'}</p>
|
<input id="my-drawer" type="checkbox" className="drawer-toggle" />
|
||||||
|
<div className="drawer-content">
|
||||||
|
{/* Page content here */}
|
||||||
|
<label
|
||||||
|
htmlFor="my-drawer"
|
||||||
|
className="btn btn-square drawer-button btn-xs"
|
||||||
|
>
|
||||||
|
>>>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="drawer-side">
|
||||||
|
<label
|
||||||
|
htmlFor="my-drawer"
|
||||||
|
aria-label="close sidebar"
|
||||||
|
className="drawer-overlay"
|
||||||
|
></label>
|
||||||
|
<ul className="menu min-h-full w-80 bg-base-200 p-4 text-base-content">
|
||||||
|
{/* Sidebar content here */}
|
||||||
|
<li>Sidebar Item 1</li>
|
||||||
|
<li>Sidebar Item 2</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,222 +1,20 @@
|
|||||||
import { Link, routes } from '@redwoodjs/router'
|
import FooterBar from 'src/components/FooterBar/FooterBar'
|
||||||
|
import HeaderBar from 'src/components/HeaderBar/HeaderBar'
|
||||||
import { useAuth } from 'src/auth'
|
import SideBar from 'src/components/SideBar/SideBar'
|
||||||
import ThemeChanger from 'src/components/ThemeChanger/ThemeChanger'
|
|
||||||
|
|
||||||
type ClientLayoutProps = {
|
type ClientLayoutProps = {
|
||||||
children?: React.ReactNode
|
children?: React.ReactNode
|
||||||
}
|
}
|
||||||
|
|
||||||
const ClientLayout = ({ children }: ClientLayoutProps) => {
|
const ClientLayout = ({ children }: ClientLayoutProps) => {
|
||||||
const { logOut } = useAuth()
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="drawer fixed top-20">
|
<SideBar></SideBar>
|
||||||
<input id="my-drawer" type="checkbox" className="drawer-toggle" />
|
<HeaderBar></HeaderBar>
|
||||||
<div className="drawer-content">
|
|
||||||
{/* Page content here */}
|
|
||||||
<label
|
|
||||||
htmlFor="my-drawer"
|
|
||||||
className="btn btn-square drawer-button btn-xs"
|
|
||||||
>
|
|
||||||
>>>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="drawer-side">
|
|
||||||
<label
|
|
||||||
htmlFor="my-drawer"
|
|
||||||
aria-label="close sidebar"
|
|
||||||
className="drawer-overlay"
|
|
||||||
></label>
|
|
||||||
<ul className="menu min-h-full w-80 bg-base-200 p-4 text-base-content">
|
|
||||||
{/* Sidebar content here */}
|
|
||||||
<li>
|
|
||||||
<a>Sidebar Item 1</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Sidebar Item 2</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="navbar bg-base-100">
|
|
||||||
<div className="flex-1">
|
|
||||||
<a className="btn btn-ghost text-xl">Pendantator</a>
|
|
||||||
</div>
|
|
||||||
<div className="flex-none">
|
|
||||||
<ul className="menu menu-horizontal px-1">
|
|
||||||
<li>
|
|
||||||
<Link to={routes.home()}>Home</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<details>
|
|
||||||
<summary>Parent</summary>
|
|
||||||
<ul className="rounded-t-none bg-base-100 p-2">
|
|
||||||
<li>
|
|
||||||
<a>Link 1</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Link 2</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</details>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className="dropdown dropdown-end">
|
|
||||||
<div tabIndex={0} role="button" className="btn btn-circle btn-ghost">
|
|
||||||
<div className="indicator">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
className="h-5 w-5"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span className="badge indicator-item badge-sm">8</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
tabIndex={0}
|
|
||||||
className="card dropdown-content card-compact z-[1] mt-3 w-52 bg-base-100 shadow"
|
|
||||||
>
|
|
||||||
<div className="card-body">
|
|
||||||
<span className="text-lg font-bold">8 Items</span>
|
|
||||||
<span className="text-info">Subtotal: $999</span>
|
|
||||||
<div className="card-actions">
|
|
||||||
<button className="btn btn-primary btn-block">View cart</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="dropdown dropdown-end">
|
|
||||||
<div
|
|
||||||
tabIndex={0}
|
|
||||||
role="button"
|
|
||||||
className="avatar btn btn-circle btn-ghost"
|
|
||||||
>
|
|
||||||
<div className="w-10 rounded-full">
|
|
||||||
<img
|
|
||||||
alt="Tailwind CSS Navbar component"
|
|
||||||
src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul
|
|
||||||
tabIndex={0}
|
|
||||||
className="menu dropdown-content menu-sm z-[1] mt-3 w-52 rounded-box bg-base-100 p-2 shadow"
|
|
||||||
>
|
|
||||||
<li>
|
|
||||||
<a className="justify-between">
|
|
||||||
Profile
|
|
||||||
<span className="badge">New</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Settings</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<ThemeChanger />
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link onClick={logOut} to={routes.home()}>
|
|
||||||
Logout
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<main>{children}</main>
|
<main>{children}</main>
|
||||||
</div>
|
</div>
|
||||||
<footer className="footer bg-base-200 p-10 text-base-content">
|
<FooterBar></FooterBar>
|
||||||
<nav>
|
|
||||||
<h6 className="footer-title">Services</h6>
|
|
||||||
<a className="link-hover link">Branding</a>
|
|
||||||
<a className="link-hover link">Design</a>
|
|
||||||
<a className="link-hover link">Marketing</a>
|
|
||||||
<a className="link-hover link">Advertisement</a>
|
|
||||||
</nav>
|
|
||||||
<nav>
|
|
||||||
<h6 className="footer-title">Company</h6>
|
|
||||||
<a className="link-hover link">About us</a>
|
|
||||||
<a className="link-hover link">Contact</a>
|
|
||||||
<a className="link-hover link">Jobs</a>
|
|
||||||
<a className="link-hover link">Press kit</a>
|
|
||||||
</nav>
|
|
||||||
<nav>
|
|
||||||
<h6 className="footer-title">Legal</h6>
|
|
||||||
<a className="link-hover link">Terms of use</a>
|
|
||||||
<a className="link-hover link">Privacy policy</a>
|
|
||||||
<a className="link-hover link">Cookie policy</a>
|
|
||||||
</nav>
|
|
||||||
</footer>
|
|
||||||
<footer className="footer fixed bottom-0 border-t border-base-300 bg-base-200 px-10 py-4 text-base-content">
|
|
||||||
<aside className="grid-flow-col items-center">
|
|
||||||
<svg
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fillRule="evenodd"
|
|
||||||
clipRule="evenodd"
|
|
||||||
className="fill-current"
|
|
||||||
>
|
|
||||||
<path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>
|
|
||||||
</svg>
|
|
||||||
<p>
|
|
||||||
ACME Industries Ltd.
|
|
||||||
<br />
|
|
||||||
Providing reliable tech since 1992
|
|
||||||
</p>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<nav className="md:place-self-center md:justify-self-end">
|
|
||||||
<div className="grid grid-flow-col gap-4">
|
|
||||||
<a>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
className="fill-current"
|
|
||||||
>
|
|
||||||
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
className="fill-current"
|
|
||||||
>
|
|
||||||
<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
className="fill-current"
|
|
||||||
>
|
|
||||||
<path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</footer>
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user