Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(docs): update the tags design and add search bar with it #984

Merged
merged 1 commit into from
Oct 8, 2024
Merged

feat(docs): update the tags design and add search bar with it #984

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions components/grid-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React, { useState } from "react";
import styles from "./grid.module.css";
import { useRouter } from "next/router";

export const GridView = ({
content,
}: {
content: {
title: string;
description: string;
path: string;
};
}) => {
const router = useRouter();
const [hover, setHover] = useState<boolean>(false);

return (
<section
className={hover ? styles.hoverGridBox : styles.gridBox}
onClick={() => {
router.push(content.path);
}}
onMouseOver={() => {
setHover(true);
}}
onMouseLeave={() => {
setHover(false);
}}
id={content.title.toLowerCase().split(" ").join("-")}
>
<h3 className="nx-font-medium nx-capitalize nx-mb-2 nx-text-base">
{content.title}
</h3>
<p className="nx-text-[#0B1742] nx-opacity-60 nx-text-sm nx-font-normal">
{content.description}
</p>
</section>
);
};
24 changes: 24 additions & 0 deletions components/grid.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.gridBox {
padding: 16px;
border-radius: 8px;
border: 1px solid #b9c5d4;
backdrop-filter: blur(35px);
flex-direction: column;
align-items: flex-start;
width: 209px;
cursor: pointer;
color: #000d3d;
}

.hoverGridBox {
padding: 16px;
border-radius: 8px;
border: 1px solid #b9c5d4;
backdrop-filter: blur(35px);
flex-direction: column;
align-items: flex-start;
background: #efebff;
width: 209px;
cursor: pointer;
color: #5f38fb;
}
69 changes: 69 additions & 0 deletions src/icons/shared-icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,3 +353,72 @@ export const Gear = ({ onClickHandler }: { onClickHandler?: () => void }) => {
</div>
);
};

export const SearchIcon = () => {
return (
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
opacity="0.6"
d="M10.0625 6.4375C10.0625 4.87891 9.21484 3.45703 7.875 2.66406C6.50781 1.87109 4.83984 1.87109 3.5 2.66406C2.13281 3.45703 1.3125 4.87891 1.3125 6.4375C1.3125 8.02344 2.13281 9.44531 3.5 10.2383C4.83984 11.0312 6.50781 11.0312 7.875 10.2383C9.21484 9.44531 10.0625 8.02344 10.0625 6.4375ZM9.21484 10.9219C8.23047 11.6875 7 12.125 5.6875 12.125C2.54297 12.125 0 9.58203 0 6.4375C0 3.32031 2.54297 0.75 5.6875 0.75C8.80469 0.75 11.375 3.32031 11.375 6.4375C11.375 7.77734 10.9102 9.00781 10.1445 9.99219L13.8086 13.6289C14.0547 13.9023 14.0547 14.3125 13.8086 14.5586C13.5352 14.832 13.125 14.832 12.8789 14.5586L9.21484 10.9219Z"
fill="#0B1742"
/>
</svg>
);
};

export const LeftIcon = () => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.06641 8.24219C1.92969 8.10547 1.875 7.94141 1.875 7.75C1.875 7.58594 1.92969 7.42188 2.06641 7.28516L6.87891 2.69141C7.15234 2.44531 7.5625 2.44531 7.80859 2.71875C8.05469 2.96484 8.05469 3.40234 7.78125 3.64844L4.14453 7.09375H13.4688C13.8242 7.09375 14.125 7.39453 14.125 7.75C14.125 8.13281 13.8242 8.40625 13.4688 8.40625H4.14453L7.78125 11.8789C8.05469 12.125 8.05469 12.5352 7.80859 12.8086C7.5625 13.082 7.15234 13.082 6.87891 12.8359L2.06641 8.24219Z"
fill="#000D3D"
/>
</svg>
);
};

export const GridViewIcon = ({ viewType }: { viewType: string }) => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.5 6.5V9.5H9.5V6.5H6.5ZM5 6.5C5 5.6875 5.65625 5 6.5 5H9.5C10.3125 5 11 5.6875 11 6.5V9.5C11 10.3438 10.3125 11 9.5 11H6.5C5.65625 11 5 10.3438 5 9.5V6.5ZM6.5 14.5V17.5H9.5V14.5H6.5ZM5 14.5C5 13.6875 5.65625 13 6.5 13H9.5C10.3125 13 11 13.6875 11 14.5V17.5C11 18.3438 10.3125 19 9.5 19H6.5C5.65625 19 5 18.3438 5 17.5V14.5ZM17.5 6.5H14.5V9.5H17.5V6.5ZM14.5 5H17.5C18.3125 5 19 5.6875 19 6.5V9.5C19 10.3438 18.3125 11 17.5 11H14.5C13.6562 11 13 10.3438 13 9.5V6.5C13 5.6875 13.6562 5 14.5 5ZM14.5 14.5V17.5H17.5V14.5H14.5ZM13 14.5C13 13.6875 13.6562 13 14.5 13H17.5C18.3125 13 19 13.6875 19 14.5V17.5C19 18.3438 18.3125 19 17.5 19H14.5C13.6562 19 13 18.3438 13 17.5V14.5Z"
fill={viewType === "grid" ? "#5F38FB" : "#8A9FB8"}
/>
</svg>
);
};

export const ListViewIcon = ({ viewType }: { viewType: string }) => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 6.75C5 6.34375 5.3125 6 5.75 6H18.25C18.6562 6 19 6.34375 19 6.75C19 7.1875 18.6562 7.5 18.25 7.5H5.75C5.3125 7.5 5 7.1875 5 6.75ZM5 11.75C5 11.3438 5.3125 11 5.75 11H18.25C18.6562 11 19 11.3438 19 11.75C19 12.1875 18.6562 12.5 18.25 12.5H5.75C5.3125 12.5 5 12.1875 5 11.75ZM19 16.75C19 17.1875 18.6562 17.5 18.25 17.5H5.75C5.3125 17.5 5 17.1875 5 16.75C5 16.3438 5.3125 16 5.75 16H18.25C18.6562 16 19 16.3438 19 16.75Z"
fill={viewType === "list" ? "#5F38FB" : "#B9C5D4"}
/>
</svg>
);
};
61 changes: 48 additions & 13 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4472,27 +4472,27 @@ div:hover > .\[div\:hover\>\&\]\:nx-opacity-100 {
}

.list-view {
border: 1px solid #ddd;
border: 1px solid #dce2ea;
border-radius: 8px;
padding: 12px;
padding: 16px 48px 16px 16px;
margin-bottom: 10px;
transition:
border-color 0.3s ease-in-out,
transform 0.3s ease-in-out;
}

.list-view-title:hover {
color: #5f38fb;
}
.list-view-title {
color: #000d3d;
font-size: 16px;
font-weight: 500;
text-transform: capitalize;
}
.list-view:hover {
/* padding: 24px; */
border-radius: 16px;
background-color: rgba(126, 190, 206, 0.2);
background: linear-gradient(
134deg,
rgba(133, 102, 255, 0.2) 16.16%,
rgba(95, 56, 251, 0.3) 55.86%,
rgba(95, 56, 251, 0.4) 78.77%
);
box-shadow: 10px 10px 30px 0px rgba(95, 56, 251, 0.3);
backdrop-filter: blur(10px);
background-color: #efebff;
backdrop-filter: blur(35px);
cursor: pointer;
}

Expand Down Expand Up @@ -5038,3 +5038,38 @@ div:hover > .\[div\:hover\>\&\]\:nx-opacity-100 {
background: #fff;
box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.1);
}

.tags {
border: 1px solid #dce2ea;
background-color: #fff;
}

.tags:hover {
border-color: #efebff;
background-color: #efebff;
color: #5f38fb;
}

.toggle-view {
border-radius: 8px;
border: 1px solid #b9c5d4;
background: #fff;
padding: 3px;
}

.toggle-list-grid-bg {
background: #efebff;
border-radius: 6px;
}

.tags-input {
display: flex;
width: 280px;
height: 44px;
padding: 12px;
justify-content: space-between;
align-items: center;
border: 1px solid #d0d9e3;
border-radius: 8px;
margin-top: 35px;
}
Loading
Loading