Skip to content

Commit

Permalink
chore: support icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@PatrickDinh
PatrickDinh committed Mar 15, 2024
1 parent a16d502 commit 7cbcff0
Show file tree
Hide file tree
Showing 8 changed files with 45 additions and 65 deletions.
3 changes: 3 additions & 0 deletions .prettierignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,6 @@ public/_static
/app/tailwind.css
package-lock.json
node_modules/

src/features/common/components/svg
src/features/common/components/icons
2 changes: 1 addition & 1 deletion src/assets/icons/code-block.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions src/assets/icons/home.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/assets/icons/wallet.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 4 additions & 16 deletions src/features/common/components/icons/code-block.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,4 @@
import * as React from 'react'
import type { SVGProps } from 'react'
const SvgCodeBlock = (props: SVGProps<SVGSVGElement>) => (
<svg xmlnsXlink="http://www.w3.org/1999/xlink" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
<g transform="matrix(1 0 0 1 -15 -161 )">
<path
d="M 3 11 L 6.600000000000001 14.6 L 8 13.149999999999999 L 5.85 11 L 8 8.85 L 6.600000000000001 7.399999999999999 L 3 11 Z M 10 13.149999999999999 L 11.399999999999999 14.6 L 15 11 L 11.399999999999999 7.399999999999999 L 10 8.85 L 12.15 11 L 10 13.149999999999999 Z M 16 20 L 2 20 C 1.4500000000000002 20 0.9791666666666674 19.804166666666667 0.5875000000000004 19.4125 C 0.19583333333333375 19.020833333333332 0 18.55 0 18 L 0 4 C 0 3.4499999999999993 0.19583333333333375 2.9791666666666643 0.5875000000000004 2.5874999999999986 C 0.9791666666666674 2.1958333333333293 1.4500000000000002 1.9999999999999964 2 2 L 6.200000000000001 2 C 6.416666666666668 1.399999999999995 6.779166666666669 0.9166666666666607 7.287500000000001 0.5499999999999972 C 7.795833333333334 0.18333333333333002 8.366666666666667 0 9 0 C 9.633333333333333 0 10.20416666666667 0.18333333333333002 10.7125 0.5499999999999972 C 11.220833333333335 0.9166666666666607 11.583333333333336 1.399999999999995 11.8 2 L 16 2 C 16.55 1.9999999999999964 17.020833333333336 2.1958333333333293 17.4125 2.5874999999999986 C 17.80416666666667 2.9791666666666643 18.000000000000004 3.4499999999999993 18 4 L 18 18 C 18.000000000000004 18.55 17.80416666666667 19.020833333333332 17.4125 19.4125 C 17.020833333333336 19.804166666666667 16.55 20 16 20 Z M 2 4 L 2 18 L 16 18 L 16 4 L 2 4 Z M 8.4625 3.037499999999998 C 8.604166666666668 3.1791666666666636 8.783333333333335 3.25 9 3.25 C 9.216666666666669 3.25 9.395833333333336 3.1791666666666636 9.537500000000001 3.037499999999998 C 9.679166666666669 2.8958333333333286 9.750000000000002 2.7166666666666615 9.75 2.5 C 9.750000000000002 2.2833333333333314 9.679166666666669 2.1041666666666643 9.537500000000001 1.9624999999999986 C 9.395833333333336 1.8208333333333293 9.216666666666669 1.75 9 1.75 C 8.783333333333335 1.75 8.604166666666668 1.8208333333333293 8.4625 1.9624999999999986 C 8.320833333333335 2.1041666666666643 8.250000000000002 2.2833333333333314 8.25 2.5 C 8.250000000000002 2.7166666666666615 8.320833333333335 2.8958333333333286 8.4625 3.037499999999998 Z M 2 4 L 2 18 L 2 4 Z "
fillRule="nonzero"
fill="currentColor"
stroke="none"
transform="matrix(1 0 0 1 15 161 )"
/>
</g>
</svg>
)
export default SvgCodeBlock
import * as React from "react";

Check failure on line 1 in src/features/common/components/icons/code-block.tsx

View workflow job for this annotation

GitHub Actions / CI / node-ci 

'React' is declared but its value is never read.
import type { SVGProps } from "react";
const SvgCodeBlock = (props: SVGProps<SVGSVGElement>) => <svg xmlnsXlink="http://www.w3.org/1999/xlink" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}><g transform="matrix(1 0 0 1 -15 -161 )"><path d="M 3 11 L 6.600000000000001 14.6 L 8 13.149999999999999 L 5.85 11 L 8 8.85 L 6.600000000000001 7.399999999999999 L 3 11 Z M 10 13.149999999999999 L 11.399999999999999 14.6 L 15 11 L 11.399999999999999 7.399999999999999 L 10 8.85 L 12.15 11 L 10 13.149999999999999 Z M 16 20 L 2 20 C 1.4500000000000002 20 0.9791666666666674 19.804166666666667 0.5875000000000004 19.4125 C 0.19583333333333375 19.020833333333332 0 18.55 0 18 L 0 4 C 0 3.4499999999999993 0.19583333333333375 2.9791666666666643 0.5875000000000004 2.5874999999999986 C 0.9791666666666674 2.1958333333333293 1.4500000000000002 1.9999999999999964 2 2 L 6.200000000000001 2 C 6.416666666666668 1.399999999999995 6.779166666666669 0.9166666666666607 7.287500000000001 0.5499999999999972 C 7.795833333333334 0.18333333333333002 8.366666666666667 0 9 0 C 9.633333333333333 0 10.20416666666667 0.18333333333333002 10.7125 0.5499999999999972 C 11.220833333333335 0.9166666666666607 11.583333333333336 1.399999999999995 11.8 2 L 16 2 C 16.55 1.9999999999999964 17.020833333333336 2.1958333333333293 17.4125 2.5874999999999986 C 17.80416666666667 2.9791666666666643 18.000000000000004 3.4499999999999993 18 4 L 18 18 C 18.000000000000004 18.55 17.80416666666667 19.020833333333332 17.4125 19.4125 C 17.020833333333336 19.804166666666667 16.55 20 16 20 Z M 2 4 L 2 18 L 16 18 L 16 4 L 2 4 Z M 8.4625 3.037499999999998 C 8.604166666666668 3.1791666666666636 8.783333333333335 3.25 9 3.25 C 9.216666666666669 3.25 9.395833333333336 3.1791666666666636 9.537500000000001 3.037499999999998 C 9.679166666666669 2.8958333333333286 9.750000000000002 2.7166666666666615 9.75 2.5 C 9.750000000000002 2.2833333333333314 9.679166666666669 2.1041666666666643 9.537500000000001 1.9624999999999986 C 9.395833333333336 1.8208333333333293 9.216666666666669 1.75 9 1.75 C 8.783333333333335 1.75 8.604166666666668 1.8208333333333293 8.4625 1.9624999999999986 C 8.320833333333335 2.1041666666666643 8.250000000000002 2.2833333333333314 8.25 2.5 C 8.250000000000002 2.7166666666666615 8.320833333333335 2.8958333333333286 8.4625 3.037499999999998 Z M 2 4 L 2 18 L 2 4 Z " fillRule="nonzero" fill="currentColor" stroke="none" transform="matrix(1 0 0 1 15 161 )" /></g></svg>;
export default SvgCodeBlock;
4 changes: 4 additions & 0 deletions src/features/common/components/icons/home.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import * as React from "react";

Check failure on line 1 in src/features/common/components/icons/home.tsx

View workflow job for this annotation

GitHub Actions / CI / node-ci 

'React' is declared but its value is never read.
import type { SVGProps } from "react";
const SvgHome = (props: SVGProps<SVGSVGElement>) => <svg xmlnsXlink="http://www.w3.org/1999/xlink" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}><g transform="matrix(1 0 0 1 -14 -66 )"><path d="M 3 17 L 8 17 L 8 11 L 12 11 L 12 17 L 17 17 L 17 9 L 20 9 L 10 0 L 0 9 L 3 9 L 3 17 Z " fillRule="nonzero" fill="currentColor" stroke="none" transform="matrix(1 0 0 1 14 66 )" /></g></svg>;
export default SvgHome;
20 changes: 4 additions & 16 deletions src/features/common/components/icons/wallet.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,4 @@
import * as React from 'react'
import type { SVGProps } from 'react'
const SvgWallet = (props: SVGProps<SVGSVGElement>) => (
<svg xmlnsXlink="http://www.w3.org/1999/xlink" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
<g transform="matrix(1 0 0 1 -12 -114 )">
<path
d="M 23.46 0.5343749999999992 C 23.82 0.890625 24 1.3062499999999975 24 1.78125 L 24 17.21875 C 24 17.693749999999998 23.82 18.109375 23.46 18.465625 C 23.1 18.821875000000002 22.68 19 22.200000000000003 19 L 1.7999999999999998 19 C 1.3200000000000003 19 0.8999999999999999 18.821875000000002 0.5400000000000003 18.465625 C 0.17999999999999988 18.109375 0 17.693749999999998 0 17.21875 L 0 1.78125 C 0 1.3062499999999975 0.17999999999999988 0.890625 0.5400000000000003 0.5343749999999992 C 0.8999999999999999 0.1781249999999983 1.3200000000000003 0 1.7999999999999998 0 L 22.200000000000003 0 C 22.68 0 23.1 0.1781249999999983 23.46 0.5343749999999992 Z M 1.7999999999999998 2 L 1.7999999999999998 5 L 22.200000000000003 5 L 22.200000000000003 2 L 1.7999999999999998 2 Z M 22.200000000000003 9 L 1.7999999999999998 9 L 1.7999999999999998 17 L 22.200000000000003 17 L 22.200000000000003 9 Z M 2 1.78125 L 2 17.21875 L 2 1.78125 Z "
fillRule="nonzero"
fill="currentColor"
stroke="none"
transform="matrix(1 0 0 1 12 114 )"
/>
</g>
</svg>
)
export default SvgWallet
import * as React from "react";

Check failure on line 1 in src/features/common/components/icons/wallet.tsx

View workflow job for this annotation

GitHub Actions / CI / node-ci 

'React' is declared but its value is never read.
import type { SVGProps } from "react";
const SvgWallet = (props: SVGProps<SVGSVGElement>) => <svg xmlnsXlink="http://www.w3.org/1999/xlink" width="1em" height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}><g transform="matrix(1 0 0 1 -12 -114 )"><path d="M 23.46 0.5343749999999992 C 23.82 0.890625 24 1.3062499999999975 24 1.78125 L 24 17.21875 C 24 17.693749999999998 23.82 18.109375 23.46 18.465625 C 23.1 18.821875000000002 22.68 19 22.200000000000003 19 L 1.7999999999999998 19 C 1.3200000000000003 19 0.8999999999999999 18.821875000000002 0.5400000000000003 18.465625 C 0.17999999999999988 18.109375 0 17.693749999999998 0 17.21875 L 0 1.78125 C 0 1.3062499999999975 0.17999999999999988 0.890625 0.5400000000000003 0.5343749999999992 C 0.8999999999999999 0.1781249999999983 1.3200000000000003 0 1.7999999999999998 0 L 22.200000000000003 0 C 22.68 0 23.1 0.1781249999999983 23.46 0.5343749999999992 Z M 1.7999999999999998 2 L 1.7999999999999998 5 L 22.200000000000003 5 L 22.200000000000003 2 L 1.7999999999999998 2 Z M 22.200000000000003 9 L 1.7999999999999998 9 L 1.7999999999999998 17 L 22.200000000000003 17 L 22.200000000000003 9 Z M 2 1.78125 L 2 17.21875 L 2 1.78125 Z " fillRule="nonzero" fill="currentColor" stroke="none" transform="matrix(1 0 0 1 12 114 )" /></g></svg>;
export default SvgWallet;
53 changes: 22 additions & 31 deletions src/features/layout/components/left-side-bar-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,35 @@ import { TemplatedNavLink } from '../../routing/components/templated-nav-link/te
import { Urls } from '../../../routes/urls'
import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList } from '@/features/primitive/components/navigation-menu'
import { cn } from '@/features/primitive/utils'
import { Drawer, DrawerContent } from '@/features/primitive/components/drawer'
import SvgWallet from '@/features/common/components/icons/wallet'
import SvgCodeBlock from '@/features/common/components/icons/code-block'
import SvgHome from '@/features/common/components/icons/home'

type Props = {
className?: string
}

export function LeftSideBarMenu({ className }: Props) {
const menuItems = [{ urlTemplate: Urls.Explore }]
const menuItems = [
{ urlTemplate: Urls.Index, icon: <SvgHome />, text: 'Home' },
{ urlTemplate: Urls.Explore, icon: <SvgWallet />, text: 'Explore' },
{ urlTemplate: Urls.AppStudio, icon: <SvgCodeBlock />, text: 'App Studio' },
]

return (
<Drawer open={true}>
<DrawerContent>
<NavigationMenu className={cn('bg-card', className)}>
<NavigationMenuList className={cn('flex-col items-start space-x-0')}>
<NavigationMenuItem>
<NavigationMenuLink asChild>
<TemplatedNavLink urlTemplate={Urls.Index} className={cn('[&.active]:text-primary flex h-12 items-center p-4')}>
Home
</TemplatedNavLink>
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink asChild>
<TemplatedNavLink urlTemplate={Urls.Explore} className={cn('[&.active]:text-primary flex h-12 items-center p-4')}>
Explore
</TemplatedNavLink>
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink asChild>
<TemplatedNavLink urlTemplate={Urls.AppStudio} className={cn('[&.active]:text-primary flex h-12 items-center p-4')}>
App Studio
</TemplatedNavLink>
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
</DrawerContent>
</Drawer>
<NavigationMenu className={cn('bg-card', className)}>
<NavigationMenuList className={cn('flex-col items-start space-x-0')}>
{menuItems.map((menuItem, index) => (
<NavigationMenuItem key={index}>
<NavigationMenuLink asChild>
<TemplatedNavLink urlTemplate={menuItem.urlTemplate} className={cn('[&.active]:text-primary flex items-center p-2 gap-2')}>
<div className={cn('text-primary')}>{menuItem.icon}</div>
{menuItem.text}
</TemplatedNavLink>
</NavigationMenuLink>
</NavigationMenuItem>
))}
</NavigationMenuList>
</NavigationMenu>
)
}

0 comments on commit 7cbcff0

Please sign in to comment.