Skip to content

Commit

Permalink
Merge pull request #20 from SweetmanTech/test
Browse files Browse the repository at this point in the history
Test
  • Loading branch information
sweetmantech authored Dec 22, 2023
2 parents dca74b9 + d283530 commit b58aade
Show file tree
Hide file tree
Showing 15 changed files with 346 additions and 112 deletions.
94 changes: 94 additions & 0 deletions components/Core/Icon/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
/* eslint-disable */
import { Icons } from "./resolver"

export type IconsType = keyof typeof Icons

interface IIcon {
name: IconsType
color?: string
variant: "primary" | "secondary"
size: number
onClick: () => any
raw: boolean
noHighlights: boolean
disabled: boolean
className?: string
}

const styles = {
base: "w-fit h-fit flex items-center justify-center rounded shadow-sm",
sizes: {
mini: "p-[2px]",
small: "p-1",
medium: "p-3",
large: "p-4",
},
variants: {
primary: {
color: "text-gray-500 bg-white",
highlight: "duration-75 hover:bg-[rgba(0,0,0,0.01)]",
},
secondary: {
color: "text-here-purple-900 bg-here-purple-50",
highlight: "duration-75 hover:opacity-75",
},
},
states: {
disabled: "cursor-not-allowed pointer-events-none",
},
}

function Icon({
name,
size,
onClick,
raw,
color,
variant,
noHighlights,
disabled,
className,
}: IIcon) {
const IconSVG = Icons[name]

return raw ? (
<IconSVG size={size} className={className} color={color} />
) : (
<button
type="button"
disabled={disabled}
onClick={!disabled ? onClick : () => {}}
className={`
${styles.base}
${styles?.variants?.[variant]?.color}
${disabled && styles.states.disabled}
${
size <= 20
? styles.sizes.mini
: size < 25
? styles.sizes.small
: size < 40
? styles.sizes.medium
: styles.sizes.large
}
${!noHighlights && styles?.variants?.[variant]?.highlight}
${className}
`}
>
<IconSVG size={size} />
</button>
)
}

const defaultProps: Partial<IIcon> = {
size: 25,
onClick: () => undefined,
raw: false,
noHighlights: false,
variant: "primary",
disabled: false,
}

Icon.defaultProps = defaultProps

export default Icon
16 changes: 16 additions & 0 deletions components/Core/Icon/resolver.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { IoWifi } from "react-icons/io5"
import { SiTidal } from "react-icons/si"
import { FaSpotify, FaApple, FaYoutube, FaFacebookF, FaInstagram, FaTwitter } from "react-icons/fa"
import { SlSocialSoundcloud } from "react-icons/sl"

export const Icons = {
wifi: IoWifi,
spotify: FaSpotify,
soundcloud: SlSocialSoundcloud,
tidal: SiTidal,
apple: FaApple,
youtube: FaYoutube,
facebook: FaFacebookF,
instagram: FaInstagram,
twitter: FaTwitter,
}
31 changes: 16 additions & 15 deletions components/LandingCard/LandingCard.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import Image from "next/image"
import Link from "next/link"
import Icon from "../Core/Icon"

const LandingCard = ({ title, img = "/images/Landing/web3.jpg", href }) => (
<Link href={href}>
<div className="p-2 border-[2px] border-[#d2d2d2] cursor-pointer font-dresden">
<div className="relative p-4 flex flex-col items-center justify-center border border-[#8c8c8c] h-full">
<div className="p-[5px] md:p-2 border-[2px] border-[#d2d2d2] cursor-pointer font-dresden">
<div className="relative p-[10px] md:p-4 flex flex-col items-center justify-center border-darkgray border h-full">
<div className="absolute inset-0 z-0">
<Image
src={img}
Expand All @@ -17,23 +18,23 @@ const LandingCard = ({ title, img = "/images/Landing/web3.jpg", href }) => (
unoptimized
/>
</div>
<div className="absolute inset-0 bg-black opacity-75" />
<div className="absolute top-2 left-2 z-20">
<p className="text-white text-xs">CCTV</p>
<div className="absolute inset-0 bg-[black] opacity-[0.75]" />
<div className="absolute top-1 left-1 md:top-2 md:left-2 z-20">
<p className="text-[white] text-[10px] md:text-xs">CCTV 002</p>
</div>
<div className="absolute top-2 right-2 z-20 flex items-center">
<div className="w-3 h-3 bg-red-500 rounded-full mr-2" />
<p className="text-white text-xs mr-2">REC</p>
<div className="w-4 h-4 bg-gray-300 rounded-sm" />
<div className="absolute top-1 right-1 md:top-2 md:right-2 z-20 flex items-center">
<div className="w-2 h-2 md:w-3 md:h-3 bg-[red] rounded-full mr-2" />
<p className="text-[white] text-[10px] md:text-xs mr-2">REC</p>
<Icon name="wifi" raw size={16} color="white" />
</div>
<div className="absolute bottom-2 left-2 z-20">
<p className="text-white text-xs">12:12PM Miami, FL</p>
<div className="absolute bottom-1 left-1 md:bottom-2 md:left-2 z-20">
<p className="text-[white] text-[10px] md:text-xs">DUR : 08:13:24:53</p>
</div>
<div className="absolute bottom-2 right-2 z-20">
<p className="text-white text-xs">12/12/2023</p>
<div className="absolute bottom-1 right-1 md:bottom-2 md:right-2 z-20">
<p className="text-[white] text-[10px] md:text-xs">2024/08/29 15:39:26</p>
</div>
<div className="relative z-10 p-6">
<h2 className="text-white text-5xl font-bold mb-2">{title}</h2>
<div className="relative z-10 p-2 md:p-6">
<h2 className="text-[white] text-[24px] md:text-5xl font-bold mb-2">{title}</h2>
</div>
</div>
</div>
Expand Down
14 changes: 14 additions & 0 deletions components/Layout/MobileLayout/MobileLayout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from "react"
import { ILayout } from "../types"
import Navbar from "../../Navbar"

const MobileLayout = ({ children }: ILayout) => (
<div className="w-screen h-screen p-[15px]">
<div className="flex flex-col gap-y-[15px]">
<Navbar />
<div className="flex-grow h-[calc(100vh-70px)]">{children}</div>
</div>
</div>
)

export default MobileLayout
3 changes: 3 additions & 0 deletions components/Layout/MobileLayout/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import MobileLayout from "./MobileLayout"

export default MobileLayout
2 changes: 2 additions & 0 deletions components/Layout/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import BaseLayout from "./BaseLayout"
import MobileLayout from "./MobileLayout"
import { ILayout } from "./types"

const layoutContainers = {
base: BaseLayout,
mobile: MobileLayout,
}

interface ILayoutFactory extends ILayout {
Expand Down
29 changes: 16 additions & 13 deletions components/Navbar/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,52 @@ import { useRouter } from "next/router"
const Navbar = () => {
const { pathname } = useRouter()

const navClasses = `md:min-w-[80px] md:px-[10px] md:h-[40px]
text-[12px] md:text-[16px] md:py-[5px] py-[2px] h-full uppercase md:capitalize
md:border-none bg-darkgray
flex items-center justify-center text-[#d2d2d2] font-dresden cursor-pointer`

const isHomePage = pathname === "/"
const isAboutPage = pathname.includes("/about")
const isMusicPage = pathname.includes("/music")
const isMintPage = pathname.includes("/mint")

return (
<div className="w-full flex gap-x-[10px]">
<div className="w-full grid grid-cols-5 md:flex gap-x-[10px]">
<Link href="/">
<div
className={`min-w-[80px] px-[10px] h-[40px] flex items-center justify-center bg-[#8c8c8c] text-[#d2d2d2] font-dresden cursor-pointer
${isHomePage ? "!bg-[#347fdb]" : ""}`}
className={`${navClasses}
${isHomePage ? "border-b-[2px] border-b-[#347fdb] md:!bg-[#347fdb]" : ""}`}
>
Home
</div>
</Link>
<Link href="/about">
<div
className={`min-w-[80px] px-[10px] h-[40px] flex items-center justify-center bg-[#8c8c8c] text-[#d2d2d2] font-dresden cursor-pointer
${isAboutPage ? "!bg-[#347fdb]" : ""}`}
className={`${navClasses}
${isAboutPage ? "border-b-[2px] border-b-[#347fdb] md:!bg-[#347fdb]" : ""}`}
>
About
</div>
</Link>
<Link href="/music">
<div
className={`min-w-[80px] px-[10px] h-[40px] flex items-center justify-center bg-[#8c8c8c] text-[#d2d2d2] font-dresden cursor-pointer
${isMusicPage ? "!bg-[#347fdb]" : ""}`}
className={`${navClasses}
${isMusicPage ? "border-b-[2px] border-b-[#347fdb] md:!bg-[#347fdb]" : ""}`}
>
Music
</div>
</Link>
<Link href="/mint">
<div
className={`min-w-[80px] px-[10px] h-[40px] flex items-center justify-center bg-[#8c8c8c] text-[#d2d2d2] font-dresden cursor-pointer
${isMintPage ? "!bg-[#347fdb]" : ""}`}
className={`${navClasses}
${isMintPage ? "border-b-[2px] border-b-[#347fdb] md:!bg-[#347fdb]" : ""}`}
>
Mint
Web3
</div>
</Link>
<a href="https://play.mynameisheno.com" target="_blank" rel="noreferrer">
<div className="min-w-[80px] px-[10px] h-[40px] flex items-center justify-center bg-[#8c8c8c] text-[#d2d2d2] font-dresden cursor-pointer">
Play
</div>
<div className={navClasses}>Play</div>
</a>
</div>
)
Expand Down
Loading

0 comments on commit b58aade

Please sign in to comment.