reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update default column list

Browse Source
This commit is contained in:
reya
2024-01-15 08:36:23 +07:00
parent dae4b1d52b
commit e93aedb703
14 changed files with 122 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
packages/lume-column-default/src/index.tsx
View File

@@ -1,9 +1,11 @@
import { Column } from "@lume/ark";
import { Column, useColumnContext } from "@lume/ark";
import { ColumnIcon } from "@lume/icons";
import { IColumn } from "@lume/types";
import { TOPICS } from "@lume/utils";
import { COL_TYPES } from "@lume/utils";
export function Default({ column }: { column: IColumn }) {
const { addColumn } = useColumnContext();
return (
<Column.Root>
<Column.Header
@@ -11,32 +13,86 @@ export function Default({ column }: { column: IColumn }) {
title="Add columns"
icon={<ColumnIcon className="size-4" />}
/>
<div className="h-full px-3 mt-3 overflow-y-auto scrollbar-none">
<div className="flex flex-col gap-5">
<div>
<h1 className="text-lg font-semibold leading-tight">Topics</h1>
<p className="text-neutral-600 dark:text-neutral-400">
Discover content based on your interests.
</p>
<div className="h-full px-3 mt-3 flex flex-col gap-3 overflow-y-auto scrollbar-none">
<div className="flex flex-col rounded-xl overflow-hidden">
<div className="h-[100px] w-full">
<img
src="/columns/topic.jpg"
srcSet="/columns/topic@2x.jpg 2x"
alt="topic"
className="w-full h-auto object-cover"
/>
</div>
<div className="grid grid-cols-2 gap-3">
{TOPICS.sort((a, b) => a.title.localeCompare(b.title)).map(
(topic, index) => (
<div
key={topic + index.toString()}
className="flex flex-col w-full px-3 rounded-lg bg-neutral-100"
>
<div className="rounded-md h-9 w-9 shrink-0">
<img
src={`/${topic.title.toLowerCase()}.jpg`}
alt={topic.title}
className="rounded-md h-9 w-9"
/>
</div>
<p className="font-medium">{topic.title}</p>
</div>
),
)}
<div className="h-16 shrink-0 px-3 flex items-center justify-between bg-neutral-50 dark:bg-neutral-950">
<div>
<h1 className="font-semibold">Topic</h1>
<p className="max-w-[18rem] truncate text-sm text-neutral-500 dark:text-neutral-600">
Explore all content based on your interest.
</p>
</div>
<button
type="button"
onClick={() => {
addColumn({ kind: COL_TYPES.topic, title: "", content: "" });
}}
className="shrink-0 w-16 h-8 rounded-lg text-sm font-semibold bg-neutral-100 dark:bg-neutral-900 text-blue-500 hover:bg-neutral-200 dark:hover:bg-neutral-800 inline-flex items-center justify-center"
>
Add
</button>
</div>
</div>
<div className="flex flex-col rounded-xl overflow-hidden">
<div className="h-[100px] w-full">
<img
src="/columns/group.jpg"
srcSet="/columns/group@2x.jpg 2x"
alt="group"
className="w-full h-auto object-cover"
/>
</div>
<div className="h-16 shrink-0 px-3 flex items-center justify-between bg-neutral-50 dark:bg-neutral-950">
<div>
<h1 className="font-semibold">Group Feeds</h1>
<p className="max-w-[18rem] truncate text-sm text-neutral-500 dark:text-neutral-600">
Collective of people you're interested in.
</p>
</div>
<button
type="button"
onClick={() => {
addColumn({ kind: COL_TYPES.group, title: "", content: "" });
}}
className="shrink-0 w-16 h-8 rounded-lg text-sm font-semibold bg-neutral-100 dark:bg-neutral-900 text-blue-500 hover:bg-neutral-200 dark:hover:bg-neutral-800 inline-flex items-center justify-center"
>
Add
</button>
</div>
</div>
<div className="flex flex-col rounded-xl overflow-hidden">
<div className="h-[100px] w-full">
<img
src="/columns/antenas.jpg"
srcSet="/columns/antenas@2x.jpg 2x"
alt="antenas"
className="w-full h-auto object-cover"
/>
</div>
<div className="h-16 shrink-0 px-3 flex items-center justify-between bg-neutral-50 dark:bg-neutral-950">
<div>
<h1 className="font-semibold">Antenas</h1>
<p className="max-w-[18rem] truncate text-sm text-neutral-500 dark:text-neutral-600">
Keep track to specific content.
</p>
</div>
<button
type="button"
onClick={() => {
addColumn({ kind: COL_TYPES.antenas, title: "", content: "" });
}}
className="shrink-0 w-16 h-8 rounded-lg text-sm font-semibold bg-neutral-100 dark:bg-neutral-900 text-blue-500 hover:bg-neutral-200 dark:hover:bg-neutral-800 inline-flex items-center justify-center"
>
Add
</button>
</div>
</div>
</div>