rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Init explore metadata features & redesign org settings panel

Browse source
This commit is contained in:
swve 2024-12-18 00:24:37 +01:00
parent 87787724c4
commit bfd27ef6e3
12 changed files with 1419 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

77
apps/web/app/orgs/[orgslug]/dash/org/settings/[subpage]/page.tsx
View file

@ -1,17 +1,52 @@
'use client'
import BreadCrumbs from '@components/Dashboard/Misc/BreadCrumbs'
import { getUriWithOrg } from '@services/config/config'
import { Info } from 'lucide-react'
import { ImageIcon, Info, LockIcon, SearchIcon, TextIcon, LucideIcon, Share2Icon } from 'lucide-react'
import Link from 'next/link'
import React, { useEffect } from 'react'
import { motion } from 'framer-motion'
import OrgEditGeneral from '@components/Dashboard/Pages/Org/OrgEditGeneral/OrgEditGeneral'
import OrgEditImages from '@components/Dashboard/Pages/Org/OrgEditImages/OrgEditImages'
import OrgEditSocials from '@components/Dashboard/Pages/Org/OrgEditSocials/OrgEditSocials'
export type OrgParams = {
subpage: string
orgslug: string
}
interface TabItem {
id: string
label: string
icon: LucideIcon
}
const SETTING_TABS: TabItem[] = [
{ id: 'general', label: 'General', icon: TextIcon },
{ id: 'previews', label: 'Images & Previews', icon: ImageIcon },
{ id: 'socials', label: 'Socials', icon: Share2Icon },
]
function TabLink({ tab, isActive, orgslug }: {
tab: TabItem,
isActive: boolean,
orgslug: string
}) {
return (
<Link href={getUriWithOrg(orgslug, '') + `/dash/org/settings/${tab.id}`}>
<div
className={`py-2 w-fit text-center border-black transition-all ease-linear ${
isActive ? 'border-b-4' : 'opacity-50'
} cursor-pointer`}
>
<div className="flex items-center space-x-2.5 mx-2.5">
<tab.icon size={16} />
<div>{tab.label}</div>
</div>
</div>
</Link>
)
}
function OrgPage({ params }: { params: OrgParams }) {
const [H1Label, setH1Label] = React.useState('')
const [H2Label, setH2Label] = React.useState('')
@ -20,6 +55,12 @@ function OrgPage({ params }: { params: OrgParams }) {
if (params.subpage == 'general') {
setH1Label('General')
setH2Label('Manage your organization settings')
} else if (params.subpage == 'previews') {
setH1Label('Previews')
setH2Label('Manage your organization previews')
} else if (params.subpage == 'socials') {
setH1Label('Socials')
setH2Label('Manage your organization social media links')
}
}
@ -29,9 +70,9 @@ function OrgPage({ params }: { params: OrgParams }) {
return (
<div className="h-full w-full bg-[#f8f8f8]">
<div className="pl-10 pr-10 tracking-tight bg-[#fcfbfc] shadow-[0px_4px_16px_rgba(0,0,0,0.02)]">
<div className="pl-10 pr-10 tracking-tight bg-[#fcfbfc] nice-shadow">
<BreadCrumbs type="org"></BreadCrumbs>
<div className="my-2 py-3">
<div className="my-2 py-2">
<div className="w-100 flex flex-col space-y-1">
<div className="pt-3 flex font-bold text-4xl tracking-tighter">
{H1Label}
@ -41,25 +82,15 @@ function OrgPage({ params }: { params: OrgParams }) {
</div>
</div>
</div>
<div className="flex space-x-5 font-black text-sm">
<Link
href={
getUriWithOrg(params.orgslug, '') + `/dash/org/settings/general`
}
>
<div
className={`py-2 w-fit text-center border-black transition-all ease-linear ${
params.subpage.toString() === 'general'
? 'border-b-4'
: 'opacity-50'
} cursor-pointer`}
>
<div className="flex items-center space-x-2.5 mx-2">
<Info size={16} />
<div>General</div>
</div>
</div>
</Link>
<div className="flex space-x-0.5 font-black text-sm">
{SETTING_TABS.map((tab) => (
<TabLink
key={tab.id}
tab={tab}
isActive={params.subpage === tab.id}
orgslug={params.orgslug}
/>
))}
</div>
</div>
<div className="h-6"></div>
@ -70,6 +101,8 @@ function OrgPage({ params }: { params: OrgParams }) {
transition={{ duration: 0.1, type: 'spring', stiffness: 80 }}
>
{params.subpage == 'general' ? <OrgEditGeneral /> : ''}
{params.subpage == 'previews' ? <OrgEditImages /> : ''}
{params.subpage == 'socials' ? <OrgEditSocials /> : ''}
</motion.div>
</div>
)