rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-06 20:50:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixed font-face and added interactivity

Browse Source
This commit is contained in:
Meliora Ho 2024-03-23 15:50:08 +00:00
parent 0ee14890cc
commit f7768ddea8
14 changed files with 145 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
compass/app/auth/forgot_password/page.tsx
View File

@ -1,11 +1,10 @@
// pages/forgot-password.tsx
"use client";
import React, { useState, useEffect } from 'react';
import React, { useState } from 'react';
import Input from '@/components/Input';
import Button from '@/components/Button';
import InlineLink from '@/components/InlineLink';
import Paper from '@/components/auth/Paper';
import ErrorBanner from '@/components/auth/ErrorBanner';

1
compass/app/auth/login/page.tsx
View File

@ -4,7 +4,6 @@
import Button from '@/components/Button';
import Input from '@/components/Input'
import InlineLink from '@/components/InlineLink';
import Paper from '@/components/auth/Paper';
import Image from 'next/image';
import { useState } from "react";
import PasswordInput from '@/components/auth/PasswordInput';

2
compass/app/auth/new_password/page.tsx
View File

@ -2,8 +2,6 @@
"use client";
import { useState, useEffect } from 'react';
import Button from '@/components/Button';
import Paper from '@/components/auth/Paper';
import PasswordInput from '@/components/auth/PasswordInput';
import ErrorBanner from '@/components/auth/ErrorBanner';

15
compass/app/resource/layout.tsx
View File

@ -2,6 +2,7 @@
import Sidebar from '@/components/resource/Sidebar';
import React, { useState } from 'react';
import {ChevronDoubleRightIcon} from '@heroicons/react/24/outline';
export default function RootLayout({
@ -9,12 +10,22 @@ export default function RootLayout({
}: {
children: React.ReactNode
}) {
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
return (
<div className="flex-row">
<button
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
aria-label={'Open sidebar'}
>
{!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 />
<Sidebar setIsSidebarOpen={setIsSidebarOpen} />
</div>
<div className={`flex-1 transition duration-300 ease-in-out ${isSidebarOpen ? 'ml-64' : 'ml-0'}`}>
{children}

38
compass/app/resource/page.tsx
View File

@ -1,39 +1,37 @@
"use client"
import Callout from "@/components/resource/Callout";
import Card from "@/components/resource/Card";
import { LandingSearchBar } from "@/components/resource/LandingSearchBar";
import { Icons } from "@/utils/constants";
import { BookOpenIcon, BookmarkIcon, ClipboardIcon } from "@heroicons/react/24/solid";
import Image from 'next/image';
export default function Page() {
return (
<>
<div className="pt-16 px-8 pb-8">
<div className="mb-4 flex items-center space-x-4">
// Ensuring the main container takes at least full viewport height
<div className="min-h-screen flex flex-col">
<div className="pt-16 px-8 pb-4 flex-grow">
<div className="mb-4 flex items-center space-x-4">
<Image
src="/logo.png"
alt='Compass Center logo.'
width={25}
height={25}
/>
<h1 className='font-bold text-2xl text-purple-800'>Compass Center Advocate Landing Page</h1>
<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.
<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>
<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.
<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>
<div className="p-8 min-h-screen border-t border-gray-200 bg-gray-50">
<div className="grid grid-cols-3 gap-6 pb-6">
<Card icon={<BookmarkIcon />} text="Resources" />
<Card icon={<ClipboardIcon />} text="Services" />
<Card icon={<BookOpenIcon />} text="Training Manuals" />
</div>
<div className="p-8 flex-grow border-t border-gray-200 bg-gray-50">
<div className="grid grid-cols-3 gap-6 pb-6">
<Card icon={<BookmarkIcon />} text="Resources" />
<Card icon={<ClipboardIcon />} text="Services" />
<Card icon={<BookOpenIcon />} text="Training Manuals" />
</div>
<LandingSearchBar />
</div>
</>
</div>
)
}
}

2
compass/components/resource/Callout.tsx
View File

@ -7,7 +7,7 @@ interface CalloutProps {
const Callout = ({ children }: CalloutProps) => {
return (
<div className="p-4 mb-4 flex items-center bg-purple-100 rounded-sm">
<span className="text-sm text-gray-700">{children}</span>
<span className="text-sm text-gray-800">{children}</span>
</div>
);
};

4
compass/components/resource/Card.tsx
View File

@ -9,10 +9,10 @@ interface TagProps {
const Card: React.FC<TagProps> = ({ text, icon }) => {
return (
<div className="flex flex-row space-x-2 items-start justify-start border border-gray-200 bg-white hover:bg-gray-50 shadow rounded-md p-4">
<span className="h-5 w-5 text-gray-700">
<span className="h-5 text-gray-800 w-5">
{icon}
</span>
<span className="text-sm font-semibold text-gray-700">{text}</span>
<span className="text-sm text-gray-800 font-semibold">{text}</span>
</div>
);
};

8
compass/components/resource/LandingSearchBar.tsx
View File

@ -1,5 +1,6 @@
import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/solid"
import React, { useState } from 'react';
import Image from 'next/image';
export const LandingSearchBar: React.FC = () => {
const [searchTerm, setSearchTerm] = useState('');
@ -17,7 +18,7 @@ export const LandingSearchBar: React.FC = () => {
<div className="flex items-center bg-white border border-gray-200 shadow rounded-md">
<div className="flex-grow">
<input
className="sm:text-sm w-full px-6 py-3 rounded-md focus:outline-none"
className="sm:text-sm text-gray-800 w-full px-6 py-3 rounded-md focus:outline-none"
type="text"
placeholder="Search..."
value={searchTerm}
@ -35,7 +36,10 @@ export const LandingSearchBar: React.FC = () => {
<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>
);
};

45
compass/components/resource/Sidebar.tsx
View File

@ -1,16 +1,30 @@
import React from 'react';
import { ChevronRightIcon, BookmarkIcon, ClipboardIcon, BookOpenIcon } from '@heroicons/react/24/solid';
import { ChevronDoubleLeftIcon, BookmarkIcon, ClipboardIcon, BookOpenIcon } from '@heroicons/react/24/solid';
import { SidebarItem } from './SidebarItem';
const Sidebar: React.FC = () => {
interface SidebarProps {
setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
}
const Sidebar: React.FC<SidebarProps> = ({setIsSidebarOpen}) => {
return (
<div className="w-64 h-full border border-gray-200 bg-gray-50 px-4 pt-6 shadow">
<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"
>
<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 text-gray-700 font-bold">Compass Center</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>
@ -19,9 +33,9 @@ const Sidebar: React.FC = () => {
<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-700" />} text="Resources" />
<SidebarItem icon={<ClipboardIcon className="w-4 h-4 text-gray-700" />} text="Services" />
<SidebarItem icon={<BookOpenIcon className="w-4 h-4 text-gray-700" />} text="Training Manuals" />
<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>
@ -29,18 +43,5 @@ const Sidebar: React.FC = () => {
);
};
interface SidebarItemProps {
icon: React.ReactElement;
text: string;
}
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-semibold text-xs text-gray-700">{text}</span>
</a>
);
};
export default Sidebar;

14
compass/components/resource/SidebarItem.tsx Normal file
View File

@ -0,0 +1,14 @@
interface SidebarItemProps {
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>
);
};

6
compass/next.config.js
View File

@ -1,4 +1,8 @@
/** @type {import('next').NextConfig} */
const nextConfig = {}
const nextConfig = {
images: {
domains: ['notioly.com']
},
}
module.exports = nextConfig

BIN
compass/public/landing_illustration.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 KiB

67
compass/styles/globals.css
View File

@ -36,12 +36,61 @@
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url('/fonts/Inter-Regular.ttf') format('ttf'),
url('/fonts/Inter-Bold.ttf') format('ttf'),
url('/fonts/Inter-Black.ttf') format('ttf'),
url('/fonts/Inter-ExtraBold.ttf') format('ttf'),
url('/fonts/Inter-ExtraLight.ttf') format('ttf'),
url('/fonts/Inter-Medium.ttf') format('ttf'),
url('/fonts/Inter-SemiBold.ttf') format('ttf'),
url('/fonts/Inter-Thin.ttf') format('ttf');
}
src: url('/fonts/Inter-Regular.ttf') format('truetype');
}
/* Inter-Bold */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url('/fonts/Inter-Bold.ttf') format('truetype');
}
/* Inter-Black */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
src: url('/fonts/Inter-Black.ttf') format('truetype');
}
/* Inter-ExtraBold */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
src: url('/fonts/Inter-ExtraBold.ttf') format('truetype');
}
/* Inter-ExtraLight */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 200;
src: url('/fonts/Inter-ExtraLight.ttf') format('truetype');
}
/* Inter-Medium */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
src: url('/fonts/Inter-Medium.ttf') format('truetype');
}
/* Inter-SemiBold */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
src: url('/fonts/Inter-SemiBold.ttf') format('truetype');
}
/* Inter-Thin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100;
src: url('/fonts/Inter-Thin.ttf') format('truetype');
}

5
compass/tailwind.config.ts
View File

@ -13,8 +13,11 @@ const config: Config = {
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
'sans': ['Inter', 'sans-serif'], // Add 'Inter' to the fontFamily theme
},
fontWeight: {
'medium': 500, // Ensure medium is correctly set to 500
}
},
},
plugins: [],