Skip to content

Commit

Permalink
chore: add mobile view
Browse files Browse the repository at this point in the history
  • Loading branch information
@dominik-stumpf
dominik-stumpf committed Jul 19, 2024
1 parent ae22328 commit 8aba3ca
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 111 deletions.
131 changes: 69 additions & 62 deletions src/app/(marketing)/profile/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
"use client"

import { Layout } from "@/components/Layout"
import {
Layout,
LayoutBanner,
LayoutHeader,
LayoutHero,
LayoutMain,
} from "@/components/Layout"
import { Avatar, AvatarFallback } from "@/components/ui/Avatar"
import { Card } from "@/components/ui/Card"
import { ChartContainer } from "@/components/ui/Chart"
Expand All @@ -12,69 +18,70 @@ const chartData = [{ experience: 1, fill: "hsl(var(--primary))" }]

const Page = () => {
return (
<Layout.Root className="relative min-h-screen">
<Layout.Hero>
<Layout.Header />
<Layout.Banner offset={100} className="border-border border-b border-dashed">
<div className="absolute inset-0 bg-[auto_115%] bg-[top_5px_right_0] bg-[url('/banner.svg')] opacity-10" />
</Layout.Banner>
</Layout.Hero>
<Layout.Main>
<div className="flex flex-col items-center">
<div className="relative mb-12 flex items-center justify-center">
<ChartContainer
config={{}}
className="-rotate-90 absolute aspect-square min-h-56"
>
<RadialBarChart
data={chartData}
startAngle={0}
endAngle={280}
innerRadius={105}
outerRadius={115}
<Layout>
<LayoutHero>
<LayoutHeader />
<LayoutBanner className="-bottom-[500px]">
<div className="absolute inset-0 bg-[url('/banner.svg')] opacity-10" />
<div className="absolute inset-0 bg-gradient-to-t from-background" />
</LayoutBanner>
</LayoutHero>
<LayoutMain>
<div className="mt-24">
<div className="flex flex-col items-center">
<div className="relative mb-12 flex items-center justify-center">
<ChartContainer
config={{}}
className="-rotate-90 absolute aspect-square min-h-56"
>
<RadialBar dataKey="experience" cornerRadius={10} />
</RadialBarChart>
</ChartContainer>
<Avatar className="size-48">
<AvatarFallback>#</AvatarFallback>
</Avatar>
<div className="absolute right-0 bottom-0 flex size-12 items-center justify-center rounded-xl bg-primary font-extrabold text-xl shadow-lg">
22
<RadialBarChart
data={chartData}
startAngle={0}
endAngle={280}
innerRadius={105}
outerRadius={115}
>
<RadialBar dataKey="experience" cornerRadius={10} />
</RadialBarChart>
</ChartContainer>
<Avatar className="size-48">
<AvatarFallback>#</AvatarFallback>
</Avatar>
<div className="absolute right-0 bottom-0 flex size-12 items-center justify-center rounded-xl bg-primary font-extrabold text-xl shadow-lg">
22
</div>
</div>
</div>
<div className="flex items-center gap-2">
<h1 className="whitespace-nowrap font-bold text-4xl leading-normal tracking-tight">
<h1 className="text-center font-bold text-4xl leading-normal tracking-tight">
Maximillian Xiaohua Longname
<CircleWavyCheck
weight="fill"
className="ml-4 inline size-6 fill-yellow-500"
/>
</h1>
<CircleWavyCheck
weight="fill"
className="relative size-6 fill-yellow-500"
/>
</div>
<div className="text-lg text-muted-foreground">@stephaniexixo11</div>
<p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground">
This is a description that perfectly matches the 80 character description
limit.
</p>
<div className="mt-8 flex h-12 items-center justify-center gap-8">
<div className="flex flex-col items-center leading-tight">
<div className="font-bold text-lg">3232</div>
<div className="text-muted-foreground">Guildmates</div>
</div>
<Separator orientation="vertical" />
<div className="flex flex-col items-center leading-tight">
<div className="font-bold text-lg">0</div>
<div className="text-muted-foreground">Followers</div>
</div>
<Separator orientation="vertical" />
<div className="flex items-center gap-2">
<Avatar>
<AvatarFallback>#</AvatarFallback>
</Avatar>
<div className="text-muted-foreground leading-tight">
Followed by <span className="font-bold">Hoho</span>,<br />
<span className="font-bold">Hihi</span> and 22 others
<div className="text-lg text-muted-foreground">@stephaniexixo11</div>
<p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground">
This is a description that perfectly matches the 80 character
description limit.
</p>
<div className="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-6">
<div className="flex flex-col items-center leading-tight">
<div className="font-bold text-lg">3232</div>
<div className="text-muted-foreground">Guildmates</div>
</div>
<Separator orientation="vertical" className="hidden sm:block" />
<div className="flex flex-col items-center leading-tight">
<div className="font-bold text-lg">0</div>
<div className="text-muted-foreground">Followers</div>
</div>
<Separator orientation="vertical" className="hidden sm:block" />
<div className="flex items-center gap-2">
<Avatar>
<AvatarFallback>#</AvatarFallback>
</Avatar>
<div className="text-muted-foreground leading-tight">
Followed by <span className="font-bold">Hoho</span>,<br />
<span className="font-bold">Hihi</span> and 22 others
</div>
</div>
</div>
</div>
Expand All @@ -93,8 +100,8 @@ const Page = () => {
</div>
<Separator className="mt-16 mb-8" />
</div>
</Layout.Main>
</Layout.Root>
</LayoutMain>
</Layout>
)
}

Expand Down
84 changes: 39 additions & 45 deletions src/v2/components/Layout/Layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,36 @@
import { cn } from "@/lib/utils"
import { Slot } from "@radix-ui/react-slot"
import clsx from "clsx"
import { PropsWithChildren, ReactNode, forwardRef } from "react"
import { PropsWithChildren, ReactNode } from "react"
import { PageContainer } from "./PageContainer"

/* -------------------------------------------------------------------------------------------------
* Root
* Layout
* -----------------------------------------------------------------------------------------------*/

export interface RootProps extends React.HTMLAttributes<HTMLDivElement> {}
export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {}

const Root = ({ children, ...props }: RootProps) => (
const Layout = ({ children, ...props }: LayoutProps) => (
<div className="flex min-h-screen flex-col" {...props}>
{children}
</div>
)

/* -------------------------------------------------------------------------------------------------
* PageContainer
* LayoutHero
* -----------------------------------------------------------------------------------------------*/

export interface PageContainerProps extends React.HTMLAttributes<HTMLDivElement> {
asChild?: boolean
}

const PageContainer = forwardRef<HTMLDivElement, PageContainerProps>(
({ children, className, asChild = false }, ref) => {
const Comp = asChild ? Slot : "div"
return (
<Comp
className={clsx("mx-auto max-w-screen-lg px-4 sm:px-8 md:px-10", className)}
ref={ref}
>
{children}
</Comp>
)
}
)

/* -------------------------------------------------------------------------------------------------
* Hero
* -----------------------------------------------------------------------------------------------*/

const Hero = ({ children }: PropsWithChildren) => (
const LayoutHero = ({ children }: PropsWithChildren) => (
<div className="relative">{children}</div>
)

/* -------------------------------------------------------------------------------------------------
* Headline
* LayoutHeadline
* -----------------------------------------------------------------------------------------------*/

interface HeadlineProps {
interface LayoutHeadlineProps {
title: ReactNode
}

const Headline = ({ title }: HeadlineProps) => (
const LayoutHeadline = ({ title }: LayoutHeadlineProps) => (
<PageContainer>
<h1 className="pt-9 pb-14 font-bold font-display text-4xl text-white tracking-tight sm:text-5xl">
{title}
Expand All @@ -62,44 +39,61 @@ const Headline = ({ title }: HeadlineProps) => (
)

/* -------------------------------------------------------------------------------------------------
* Banner
* LayoutBannerBackground
* -----------------------------------------------------------------------------------------------*/

interface LayoutBannerBackgroundProps {
className?: string
}

const LayoutBannerBackground = ({ className }: LayoutBannerBackgroundProps) => (
<div className={cn("absolute inset-0 bg-banner", className)} />
)

/* -------------------------------------------------------------------------------------------------
* LayoutBanner
* -----------------------------------------------------------------------------------------------*/

interface BannerProps extends PropsWithChildren {
offset?: number
interface LayoutBannerProps extends PropsWithChildren {
className?: string
}

const Banner = ({ children, offset = 112, className }: BannerProps) => (
const LayoutBanner = ({ children, className }: LayoutBannerProps) => (
<div
className={"-z-10 absolute inset-0 overflow-hidden"}
style={{ bottom: -offset }}
className={cn("-z-10 -bottom-48 absolute inset-0 overflow-hidden", className)}
>
<div className={cn("absolute inset-0 bg-banner", className)} />
{children}
</div>
)

/* -------------------------------------------------------------------------------------------------
* Main
* LayoutMain
* -----------------------------------------------------------------------------------------------*/

const Main = ({ children }: PropsWithChildren) => (
const LayoutMain = ({ children }: PropsWithChildren) => (
<main>
<PageContainer>{children}</PageContainer>
</main>
)

/* -------------------------------------------------------------------------------------------------
* Footer
* LayoutFooter
* -----------------------------------------------------------------------------------------------*/

const Footer = ({ children }: PropsWithChildren) => (
const LayoutFooter = ({ children }: PropsWithChildren) => (
<footer className="mt-auto">
<PageContainer>{children}</PageContainer>
</footer>
)

/* -----------------------------------------------------------------------------------------------*/

export { Banner, Footer, Headline, Hero, Main, PageContainer, Root }
export {
LayoutBanner,
LayoutBannerBackground,
LayoutFooter,
LayoutHeadline,
LayoutHero,
LayoutMain,
Layout,
}
21 changes: 21 additions & 0 deletions src/v2/components/Layout/PageContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Slot } from "@radix-ui/react-slot"
import clsx from "clsx"
import { forwardRef } from "react"

export interface PageContainerProps extends React.HTMLAttributes<HTMLDivElement> {
asChild?: boolean
}

export const PageContainer = forwardRef<HTMLDivElement, PageContainerProps>(
({ children, className, asChild = false }, ref) => {
const Comp = asChild ? Slot : "div"
return (
<Comp
className={clsx("mx-auto max-w-screen-lg px-4 sm:px-8 md:px-10", className)}
ref={ref}
>
{children}
</Comp>
)
}
)
13 changes: 9 additions & 4 deletions src/v2/components/Layout/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { Header } from "@/components/Header"
import { Banner, Footer, Headline, Hero, Main, Root } from "./Layout"

export const Layout = { Root, Headline, Banner, Hero, Footer, Main, Header }
export { Header as LayoutHeader } from "@/components/Header"
export {
LayoutBanner,
LayoutFooter,
LayoutHeadline,
LayoutHero,
LayoutMain,
Layout,
} from "./Layout"

0 comments on commit 8aba3ca

Please sign in to comment.