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.

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

feat:Outlined icons #392

Merged
merged 5 commits into from
Oct 31, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
3 changes: 3 additions & 0 deletions public/images/person_FILL1_wght400_GRAD0_opsz24.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
190 changes: 98 additions & 92 deletions src/app/SideBar.astro

Large diffs are not rendered by default.

107 changes: 58 additions & 49 deletions src/components/BreadCrumbs/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,62 +6,71 @@ import { Breadcrumb } from 'flowbite-react';
import { HiHome } from 'react-icons/hi';

interface BreadCrumbI {
href: string;
text: string;
href: string;
text: string;
}

export default function BreadCrumbs() {
const [breadcrumbList, setBreadcrumbList] = useState<BreadCrumbI[]>([]);

const [breadcrumbList, setBreadcrumbs] = useState<BreadCrumbI[]>([])
useEffect(() => {
const pathUrl = window.location.pathname;
const asPathNestedRoutes = pathUrl.split('/').filter((v) => v.length > 0);

useEffect(() => {
const crumblist = asPathNestedRoutes.map((subpath, idx) => {
const href = `/${asPathNestedRoutes.slice(0, idx + 1).join('/')}`;
return { href, text: subpath };
});

const pathUrl = window.location.pathname
const asPathNestedRoutes = pathUrl
.split('/')
.filter((v) => v.length > 0);
setBreadcrumbList(crumblist);
}, []);

const crumblist = asPathNestedRoutes.map((subpath, idx) => {
const href = `/${asPathNestedRoutes.slice(0, idx + 1).join('/')}`;
return { href, text: subpath };
});
return (
<Breadcrumb
aria-label="Solid background breadcrumb example"
className="bg-gray-50 py-3 dark:bg-gray-900"
>
<div className="flex flex-wrap">
<Breadcrumb.Item href="/dashboard">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
>
<path
fill="#6B7280"
d="M6 19h3v-6h6v6h3v-9l-6-4.5L6 10v9Zm-2 2V9l8-6 8 6v12h-7v-6h-2v6H4Z"
/>
</svg>

setBreadcrumbs(crumblist)
<p>Home</p>
</Breadcrumb.Item>

}, [])

return (
<Breadcrumb
aria-label="Solid background breadcrumb example"
className="bg-gray-50 py-3 dark:bg-gray-900"
>

<div className='flex flex-wrap'>
<Breadcrumb.Item
href="/dashboard"
icon={HiHome}
>
<p>
Home
</p>
</Breadcrumb.Item>

{breadcrumbList.map((crumb, idx) => {
const crumbData = crumb.text.charAt(0).toUpperCase() + crumb.text.slice(1)
const routes = crumbData ? crumbData?.split("-").reduce((s, c) => (s.charAt(0).toUpperCase() + s.slice(1)) + " " + (c.charAt(0).toUpperCase() + c.slice(1))
) : ""
return (
<Breadcrumb.Item
href={crumb.href}
key={idx}
>
{routes}
</Breadcrumb.Item>
);
})}
</div>
</Breadcrumb>
)
{breadcrumbList.map((crumb, idx) => {
console.log("crumb",);

const crumbData =
crumb.text.charAt(0).toUpperCase() + crumb.text.slice(1);
const routes = crumbData
? crumbData
?.split('-')
.reduce(
(s, c) =>
s.charAt(0).toUpperCase() +
s.slice(1) +
' ' +
(c.charAt(0).toUpperCase() + c.slice(1)),
)
: '';
return (
<Breadcrumb.Item href={crumb.href} key={crumb.text}>
{routes}
</Breadcrumb.Item>
);
})}
</div>
</Breadcrumb>
);
}


34 changes: 22 additions & 12 deletions src/components/ColorModeSwitcher.astro
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,35 @@
>
<svg
id="theme-toggle-dark-icon"
class="hidden w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
class="hidden"
xmlns="http://www.w3.org/2000/svg"
><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
>
<path
fill="#6B7280"
d="M12 21c-2.5 0-4.625-.875-6.375-2.625S3 14.5 3 12s.875-4.625 2.625-6.375S9.5 3 12 3a9.304 9.304 0 0 1 1.35.1 5.292 5.292 0 0 0-1.637 1.887A5.31 5.31 0 0 0 11.1 7.5c0 1.5.525 2.775 1.575 3.825C13.725 12.375 15 12.9 16.5 12.9a5.28 5.28 0 0 0 2.525-.613A5.322 5.322 0 0 0 20.9 10.65 8.505 8.505 0 0 1 21 12c0 2.5-.875 4.625-2.625 6.375S14.5 21 12 21Zm0-2c1.467 0 2.783-.404 3.95-1.212a7.012 7.012 0 0 0 2.55-3.163c-.333.083-.667.15-1 .2-.333.05-.667.075-1 .075-2.05 0-3.796-.72-5.238-2.162C9.821 11.296 9.1 9.55 9.1 7.5c0-.333.025-.667.075-1 .05-.333.117-.667.2-1a7.013 7.013 0 0 0-3.162 2.55C5.404 9.217 5 10.533 5 12c0 1.933.683 3.583 2.05 4.95C8.417 18.317 10.067 19 12 19Z"
></path></svg
>

<svg
id="theme-toggle-light-icon"
class="hidden w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
class="hidden "
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
><path
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
fill-rule="evenodd"
clip-rule="evenodd"></path></svg
>
</button>
<path
fill="#6B7280"
d="M12 15c.833 0 1.542-.292 2.125-.875A2.893 2.893 0 0 0 15 12c0-.833-.292-1.542-.875-2.125A2.893 2.893 0 0 0 12 9c-.833 0-1.542.292-2.125.875A2.893 2.893 0 0 0 9 12c0 .833.292 1.542.875 2.125A2.893 2.893 0 0 0 12 15Zm0 2c-1.383 0-2.563-.488-3.537-1.463C7.488 14.563 7 13.383 7 12s.487-2.563 1.463-3.537C9.438 7.488 10.617 7 12 7s2.563.487 3.537 1.463C16.512 9.438 17 10.617 17 12s-.488 2.563-1.463 3.537C14.563 16.512 13.383 17 12 17ZM2 13a.967.967 0 0 1-.712-.287A.968.968 0 0 1 1 12a.97.97 0 0 1 .288-.713A.967.967 0 0 1 2 11h2c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.967.967 0 0 1 4 13H2Zm18 0a.968.968 0 0 1-.712-.287A.968.968 0 0 1 19 12a.97.97 0 0 1 .288-.713A.968.968 0 0 1 20 11h2a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 22 13h-2Zm-8-8a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 4V2a.97.97 0 0 1 .287-.712A.968.968 0 0 1 12 1a.97.97 0 0 1 .713.288A.968.968 0 0 1 13 2v2c0 .283-.096.52-.287.713A.968.968 0 0 1 12 5Zm0 18a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 22v-2a.97.97 0 0 1 .287-.712A.968.968 0 0 1 12 19a.97.97 0 0 1 .713.288A.968.968 0 0 1 13 20v2a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 23ZM5.65 7.05 4.575 6a.87.87 0 0 1-.288-.7 1.09 1.09 0 0 1 .288-.725c.2-.2.442-.3.725-.3s.517.1.7.3L7.05 5.65c.183.2.275.433.275.7 0 .267-.092.5-.275.7a.856.856 0 0 1-.688.288 1.07 1.07 0 0 1-.712-.288ZM18 19.425l-1.05-1.075a1.019 1.019 0 0 1-.275-.713c0-.274.092-.504.275-.687a.856.856 0 0 1 .688-.287c.274.008.512.104.712.287L19.425 18a.87.87 0 0 1 .287.7 1.085 1.085 0 0 1-.287.725c-.2.2-.442.3-.725.3a.908.908 0 0 1-.7-.3ZM16.95 7.05a.856.856 0 0 1-.287-.688 1.07 1.07 0 0 1 .287-.712L18 4.575a.87.87 0 0 1 .7-.288c.283.009.525.105.725.288.2.2.3.442.3.725s-.1.517-.3.7L18.35 7.05c-.2.183-.433.275-.7.275-.267 0-.5-.092-.7-.275ZM4.575 19.425c-.2-.2-.3-.442-.3-.725s.1-.517.3-.7l1.075-1.05c.2-.183.438-.275.712-.275.276 0 .505.092.688.275.2.183.296.413.288.688a1.07 1.07 0 0 1-.288.712L6 19.425a.87.87 0 0 1-.7.287 1.085 1.085 0 0 1-.725-.287Z"
></path>
</svg></button
>

<div
id="tooltip-toggle"
role="tooltip"
Expand Down
4 changes: 2 additions & 2 deletions src/components/CreateEcosystemOrgModal/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@ import { createOrganization } from "../../api/organization";
import { getFromLocalStorage } from "../../api/Auth";
import { createEcosystems } from "../../api/ecosystem";
import { getOrgDetails } from "../../config/ecosystem";
import React from "react";

import defaultUserIcon from "../../../public/images/person_FILL1_wght400_GRAD0_opsz24.svg"
interface Values {
name: string;
description: string;
Expand Down Expand Up @@ -291,6 +290,7 @@ const CreateEcosystemOrgModal = (props: IProps) => {
typeof (logoImage.logoFile) === "string" ?
<Avatar
size="lg"
img={defaultUserIcon}
/> :
<img
className="mb-4 rounded-lg w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
Expand Down
Loading