mirror of
https://github.com/cssgunc/compass.git
synced 2025-04-06 20:50:17 -04:00
Format code better
This commit is contained in:
Meliora Ho
parent
1f4e272979
commit
52e23b7f85
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
import Paper from '@/components/auth/Paper';
|
||||
|
||||
|
||||
|
||||
export default function RootLayout({
|
||||
// Layouts must accept a children prop.
|
||||
|
|
@ -11,12 +11,12 @@ export default function RootLayout({
|
|||
}) {
|
||||
return (
|
||||
<Paper>
|
||||
<form className="mb-0 m-auto mt-6 space-y-4 border border-gray-200 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
|
||||
{children}
|
||||
</form>
|
||||
<p className="text-center mt-6 text-gray-500 text-xs">
|
||||
© 2024 Compass Center
|
||||
</p>
|
||||
</Paper>
|
||||
<form className="mb-0 m-auto mt-6 space-y-4 border border-gray-200 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
|
||||
{children}
|
||||
</form>
|
||||
<p className="text-center mt-6 text-gray-500 text-xs">
|
||||
© 2024 Compass Center
|
||||
</p>
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
import Sidebar from '@/components/resource/Sidebar';
|
||||
import React, { useState } from 'react';
|
||||
import {ChevronDoubleRightIcon} from '@heroicons/react/24/outline';
|
||||
import { ChevronDoubleRightIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
|
|
@ -19,11 +19,11 @@ export default function RootLayout({
|
|||
className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
|
||||
aria-label={'Open sidebar'}
|
||||
>
|
||||
{!isSidebarOpen &&
|
||||
{!isSidebarOpen &&
|
||||
<ChevronDoubleRightIcon className="h-5 w-5" /> // Icon for closing the sidebar
|
||||
}
|
||||
</button>
|
||||
|
||||
|
||||
<div className={`absolute inset-y-0 left-0 transform ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} w-64 transition duration-300 ease-in-out`}>
|
||||
<Sidebar setIsSidebarOpen={setIsSidebarOpen} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default function Page() {
|
|||
<h1 className='font-bold text-2xl text-purple-800'>Compass Center Advocate Landing Page</h1>
|
||||
</div>
|
||||
<Callout>
|
||||
Welcome! Below you will find a list of resources for the Compass Center's trained advocates. These materials serve to virtually provide a collection of advocacy, resource, and hotline manuals and information.
|
||||
Welcome! Below you will find a list of resources for the Compass Center's trained advocates. These materials serve to virtually provide a collection of advocacy, resource, and hotline manuals and information.
|
||||
<b> If you are an advocate looking for the contact information of a particular Compass Center employee, please directly contact your staff back-up or the person in charge of your training.</b>
|
||||
</Callout>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, {ReactNode} from "react";
|
||||
import React, { ReactNode } from "react";
|
||||
|
||||
|
||||
interface TagProps {
|
||||
|
|
|
|||
|
|
@ -3,43 +3,43 @@ import React, { useState } from 'react';
|
|||
import Image from 'next/image';
|
||||
|
||||
export const LandingSearchBar: React.FC = () => {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchTerm(event.target.value);
|
||||
};
|
||||
|
||||
const clearSearch = () => {
|
||||
setSearchTerm('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w mx-auto">
|
||||
<div className="flex items-center bg-white border border-gray-200 shadow rounded-md">
|
||||
<div className="flex-grow">
|
||||
<input
|
||||
className="sm:text-sm text-gray-800 w-full px-6 py-3 rounded-md focus:outline-none"
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={searchTerm}
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
</div>
|
||||
{searchTerm && (
|
||||
<button
|
||||
onClick={clearSearch}
|
||||
>
|
||||
<XMarkIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
|
||||
</button>
|
||||
)}
|
||||
<div className="p-3">
|
||||
<MagnifyingGlassIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
|
||||
</div>
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchTerm(event.target.value);
|
||||
};
|
||||
|
||||
const clearSearch = () => {
|
||||
setSearchTerm('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w mx-auto">
|
||||
<div className="flex items-center bg-white border border-gray-200 shadow rounded-md">
|
||||
<div className="flex-grow">
|
||||
<input
|
||||
className="sm:text-sm text-gray-800 w-full px-6 py-3 rounded-md focus:outline-none"
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={searchTerm}
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col pt-16 space-y-2 justify-center items-center">
|
||||
<Image alt="Landing illustration" src="/landing_illustration.png" width={250} height={250} />
|
||||
<h2 className="font-medium text-medium text-gray-800">Need to find something? Use the links above or the search bar to get your results.</h2>
|
||||
{searchTerm && (
|
||||
<button
|
||||
onClick={clearSearch}
|
||||
>
|
||||
<XMarkIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
|
||||
</button>
|
||||
)}
|
||||
<div className="p-3">
|
||||
<MagnifyingGlassIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
<div className="flex flex-col pt-16 space-y-2 justify-center items-center">
|
||||
<Image alt="Landing illustration" src="/landing_illustration.png" width={250} height={250} />
|
||||
<h2 className="font-medium text-medium text-gray-800">Need to find something? Use the links above or the search bar to get your results.</h2>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,37 +6,37 @@ interface SidebarProps {
|
|||
setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
const Sidebar: React.FC<SidebarProps> = ({setIsSidebarOpen}) => {
|
||||
const Sidebar: React.FC<SidebarProps> = ({ setIsSidebarOpen }) => {
|
||||
return (
|
||||
<div className="w-64 h-full border border-gray-200 bg-gray-50 px-4 shadow">
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={() => setIsSidebarOpen(false)}
|
||||
className="py-2 text-gray-500 hover:text-gray-800"
|
||||
aria-label="Close sidebar"
|
||||
onClick={() => setIsSidebarOpen(false)}
|
||||
className="py-2 text-gray-500 hover:text-gray-800"
|
||||
aria-label="Close sidebar"
|
||||
>
|
||||
<ChevronDoubleLeftIcon className="h-5 w-5" />
|
||||
<ChevronDoubleLeftIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-col space-y-8">
|
||||
|
||||
|
||||
<div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md ">
|
||||
|
||||
|
||||
<div className="flex flex-col items-start space-y-2">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-semibold text-gray-800">Compass Center</span>
|
||||
<span className="text-xs text-gray-500">cssgunc@gmail.com</span>
|
||||
<span className="text-sm font-semibold text-gray-800">Compass Center</span>
|
||||
<span className="text-xs text-gray-500">cssgunc@gmail.com</span>
|
||||
</div>
|
||||
<button className="text-red-600 text-xs hover:underline mt-1">Sign out</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<h4 className="text-xs font-semibold text-gray-500">Pages</h4>
|
||||
<nav className="flex flex-col">
|
||||
<SidebarItem icon={<BookmarkIcon className="w-4 h-4 text-gray-500" />} text="Resources" />
|
||||
<SidebarItem icon={<ClipboardIcon className="w-4 h-4 text-gray-500" />} text="Services" />
|
||||
<SidebarItem icon={<BookOpenIcon className="w-4 h-4 text-gray-500" />} text="Training Manuals" />
|
||||
</nav>
|
||||
<h4 className="text-xs font-semibold text-gray-500">Pages</h4>
|
||||
<nav className="flex flex-col">
|
||||
<SidebarItem icon={<BookmarkIcon className="w-4 h-4 text-gray-500" />} text="Resources" />
|
||||
<SidebarItem icon={<ClipboardIcon className="w-4 h-4 text-gray-500" />} text="Services" />
|
||||
<SidebarItem icon={<BookOpenIcon className="w-4 h-4 text-gray-500" />} text="Training Manuals" />
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
|
||||
interface SidebarItemProps {
|
||||
icon: React.ReactElement;
|
||||
text: string;
|
||||
}
|
||||
|
||||
icon: React.ReactElement;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export const SidebarItem: React.FC<SidebarItemProps> = ({ icon, text }) => {
|
||||
return (
|
||||
<a href="#" className="flex items-center p-2 space-x-2 hover:bg-gray-200 rounded-md">
|
||||
{icon}
|
||||
<span className="flex-grow font-medium text-xs text-gray-500">{text}</span>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<a href="#" className="flex items-center p-2 space-x-2 hover:bg-gray-200 rounded-md">
|
||||
{icon}
|
||||
<span className="flex-grow font-medium text-xs text-gray-500">{text}</span>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user