Skip to content

Commit

Permalink
chore&refactor: replaced svg with heroicons, refactored code in subst…
Browse files Browse the repository at this point in the history 
…itutions
  • Loading branch information
@rvyk
rvyk committed Dec 23, 2023
1 parent 50c23aa commit 96e827c
Show file tree
Hide file tree
Showing 5 changed files with 62 additions and 172 deletions.
19 changes: 2 additions & 17 deletions src/components/Message.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import axios from "axios";
import { useCallback, useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { ArrowRightIcon, XMarkIcon } from "@heroicons/react/24/outline";

const MessageType: {
[key in MessageType]: {
Expand Down Expand Up @@ -85,22 +85,7 @@ export default function Message() {
href={message?.redirectUrl}
className="mt-2 md:mt-0 inline-flex ml-3 items-center justify-center px-3 py-2 me-2 text-xs font-medium text-white rounded-lg bg-[#321c21] hover:bg-[#480e0c] focus:ring-4 focus:ring-red-300 dark:hover:bg-red-500 dark:bg-red-400 transition-all focus:outline-none dark:focus:ring-red-800"
>
Przejdź{" "}
<svg
className="w-3 h-3 ms-2 rtl:rotate-180"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 10"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M1 5h12m0 0L9 1m4 4L9 9"
/>
</svg>
Przejdź <ArrowRightIcon className="w-3 h-3 ms-2 rtl:rotate-180" />
</a>
)}
</div>
Expand Down
60 changes: 10 additions & 50 deletions src/components/Substitutions/Content.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
import {
CheckIcon,
ClipboardIcon,
FunnelIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
Expand Down Expand Up @@ -71,49 +77,16 @@ function Content({ props, checkedTeachers, checkedBranches }) {
{(filtersTeachers?.length > 0 ||
filtersBranches?.length > 0) && (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="currentColor"
className="w-4 h-4"
>
<path d="M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z" />
</svg>
<FunnelIcon className="w-4 h-4" />
<p className="mr-2">Filtry: </p>
<button
onClick={handleShare}
className="cursor-pointer justify-center inline-flex items-center transition-all px-2 py-1 mr-2 text-sm font-medium text-red-900 bg-red-300 rounded dark:bg-blue-300 dark:text-blue-900 "
>
{isCopied ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="w-5 h-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
</svg>
<CheckIcon className="w-5 h-5" />
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="w-5 h-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
/>
</svg>
<ClipboardIcon className="w-5 h-5" />
)}
</button>

Expand All @@ -130,20 +103,7 @@ function Content({ props, checkedTeachers, checkedBranches }) {
className="cursor-pointer justify-center inline-flex items-center transition-all px-2 py-1 mr-2 text-sm font-medium text-red-800 bg-red-100 rounded dark:bg-blue-100 dark:text-blue-800 "
>
Wyczyść filtry
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
<XMarkIcon className="w-4 h-4 ml-1" />
</button>
{Object.entries({
...checkedTeachers,
Expand Down
15 changes: 2 additions & 13 deletions src/components/Substitutions/DropdownBranch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { getQueryItems } from "@/utils/getQueryItems";
import { handleCheckboxChange } from "@/utils/handleCheckboxChange";
import { XMarkIcon } from "@heroicons/react/24/outline";

function DropdownBranch({ props, onCheckboxChangeBranch }) {
const [searchBranch, setSearchBranch] = useState("");
Expand Down Expand Up @@ -33,19 +34,7 @@ function DropdownBranch({ props, onCheckboxChangeBranch }) {
<div className="p-3">
<div className="relative">
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg
className="w-5 h-5 text-gray-500 dark:text-gray-300"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clipRule="evenodd"
></path>
</svg>
<XMarkIcon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
</div>
<input
type="text"
Expand Down
15 changes: 2 additions & 13 deletions src/components/Substitutions/DropdownTeachers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { getQueryItems } from "@/utils/getQueryItems";
import { handleCheckboxChange } from "@/utils/handleCheckboxChange";
import { XMarkIcon } from "@heroicons/react/24/outline";

function DropdownTeachers({ props, onCheckboxChange }) {
const [searchTeachers, setSearchTeachers] = useState("");
Expand Down Expand Up @@ -33,19 +34,7 @@ function DropdownTeachers({ props, onCheckboxChange }) {
<div className="p-3">
<div className="relative">
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg
className="w-5 h-5 text-gray-500 dark:text-gray-300"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clipRule="evenodd"
></path>
</svg>
<XMarkIcon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
</div>
<input
type="text"
Expand Down
125 changes: 46 additions & 79 deletions src/components/Substitutions/Jumbotron.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,48 @@ import Image from "next/legacy/image";
import Link from "next/link";
import React from "react";
import Event from "@/components/Event";
import {
ChevronDownIcon,
UserCircleIcon,
UserGroupIcon,
} from "@heroicons/react/24/outline";

const buttons = [
{
id: "dropdownSearchBranch",
dropdownToggle: "dropdownBranch",
dropdownPlacement: "bottom",
text: "Filtruj wg. oddziałów",
icon: UserGroupIcon,
},
{
id: "dropdownSearchTeacher",
dropdownToggle: "dropdownTeacher",
dropdownPlacement: "bottom",
text: "Filtruj wg. nauczycieli",
icon: UserCircleIcon,
},
];

const ButtonComponent = ({
id,
dropdownToggle,
dropdownPlacement,
text,
icon: Icon,
}) => (
<button
id={id}
data-dropdown-toggle={dropdownToggle}
data-dropdown-placement={dropdownPlacement}
className="text-[#a91712] hover:text-white hover:border-transparent bg-transparent dark:border-[2px] border-[1px] border-[#a91712] mx-2 sm:my-0 my-2 hover:bg-[#73110e] transition-all focus:ring-4 focus:outline-none focus:ring-transparent font-medium text-sm px-4 py-2.5 text-center inline-flex items-center dark:text-gray-300 hover:dark:text-white dark:bg-[#202020] dark:rounded-lg dark:border-none dark:hover:bg-[#141414] dark:outline-none"
type="button"
>
<Icon className="h-5 w-5 mr-2" aria-hidden="true" />
{text}
<ChevronDownIcon className="w-4 h-4 ml-2" aria-hidden="true" />
</button>
);

function Jumbotron({ props }) {
return (
Expand All @@ -10,7 +52,7 @@ function Jumbotron({ props }) {
<Link
prefetch={false}
href={"https://zstiojar.edu.pl"}
className="relative w-20 h-20 mr-4 hidden md:block"
className="relative w-20 h-20 mr-4 hidden md:block z-30"
>
<Event />
<Image
Expand All @@ -30,84 +72,9 @@ function Jumbotron({ props }) {
</p>
{props?.form?.tables?.length > 0 && (
<>
<button
id="dropdownSearchBranch"
data-dropdown-toggle="dropdownBranch"
data-dropdown-placement="bottom"
className="text-[#a91712] hover:text-white hover:border-transparent bg-transparent dark:border-[2px] border-[1px] border-[#a91712] mx-2 sm:my-0 my-2 hover:bg-[#73110e] transition-all focus:ring-4 focus:outline-none focus:ring-transparent font-medium text-sm px-4 py-2.5 text-center inline-flex items-center dark:text-gray-300 hover:dark:text-white dark:bg-[#202020] dark:rounded-lg dark:border-none dark:hover:bg-[#141414] dark:outline-none"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
aria-hidden="true"
className="h-5 w-5 mr-2"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5"
></path>
</svg>
Filtruj wg. oddziałów{" "}
<svg
className="w-4 h-4 ml-2"
aria-hidden="true"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M19 9l-7 7-7-7"
></path>
</svg>
</button>
<button
id="dropdownSearchTeacher"
data-dropdown-toggle="dropdownTeacher"
data-dropdown-placement="bottom"
className="text-[#a91712] hover:text-white hover:border-transparent bg-transparent dark:border-[2px] border-[1px] border-[#a91712] mx-2 sm:my-0 my-2 hover:bg-[#73110e] transition-all focus:ring-4 focus:outline-none focus:ring-transparent font-medium text-sm px-4 py-2.5 text-center inline-flex items-center dark:text-gray-300 hover:dark:text-white dark:bg-[#202020] dark:rounded-lg dark:border-none dark:hover:bg-[#141414] dark:outline-none"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
aria-hidden="true"
className="h-5 w-5 mr-2"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
></path>
</svg>
Filtruj wg. nauczycieli{" "}
<svg
className="w-4 h-4 ml-2"
aria-hidden="true"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M19 9l-7 7-7-7"
></path>
</svg>
</button>
{buttons.map((button) => (
<ButtonComponent key={button.id} {...button} />
))}
</>
)}
</div>
Expand Down

0 comments on commit 96e827c

Please sign in to comment.