mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-07 06:43:29 +00:00
parent
412159682b
commit
cd8d369cec
|
@ -1,10 +1,12 @@
|
||||||
// import { X } from '@phosphor-icons/react';
|
// import { X } from '@phosphor-icons/react';
|
||||||
|
import clsx from 'clsx';
|
||||||
import { Icon, IconName } from '~/components';
|
import { Icon, IconName } from '~/components';
|
||||||
|
|
||||||
type NewCardProps =
|
type NewCardProps =
|
||||||
| {
|
| {
|
||||||
icons: IconName[];
|
icons: IconName[];
|
||||||
text: string;
|
text: string;
|
||||||
|
className?: string;
|
||||||
button?: () => JSX.Element;
|
button?: () => JSX.Element;
|
||||||
buttonText?: never;
|
buttonText?: never;
|
||||||
buttonHandler?: never;
|
buttonHandler?: never;
|
||||||
|
@ -12,6 +14,7 @@ type NewCardProps =
|
||||||
| {
|
| {
|
||||||
icons: IconName[];
|
icons: IconName[];
|
||||||
text: string;
|
text: string;
|
||||||
|
className?: string;
|
||||||
buttonText: string;
|
buttonText: string;
|
||||||
buttonHandler: () => void;
|
buttonHandler: () => void;
|
||||||
button?: never;
|
button?: never;
|
||||||
|
@ -19,9 +22,21 @@ type NewCardProps =
|
||||||
|
|
||||||
const maskImage = `linear-gradient(90deg, transparent 0.1%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 35%, transparent 99%)`;
|
const maskImage = `linear-gradient(90deg, transparent 0.1%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 35%, transparent 99%)`;
|
||||||
|
|
||||||
export default function NewCard({ icons, text, buttonText, buttonHandler, button }: NewCardProps) {
|
export default function NewCard({
|
||||||
|
icons,
|
||||||
|
text,
|
||||||
|
buttonText,
|
||||||
|
buttonHandler,
|
||||||
|
button,
|
||||||
|
className
|
||||||
|
}: NewCardProps) {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-[170px] w-[280px] shrink-0 flex-col justify-between rounded border border-dashed border-app-line p-4">
|
<div
|
||||||
|
className={clsx(
|
||||||
|
'flex h-[170px] w-[280px] shrink-0 flex-col justify-between rounded border border-dashed border-app-line p-4',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
<div className="flex flex-row items-start justify-between">
|
<div className="flex flex-row items-start justify-between">
|
||||||
<div
|
<div
|
||||||
className="flex flex-row"
|
className="flex flex-row"
|
||||||
|
|
|
@ -127,6 +127,7 @@ export const Component = () => {
|
||||||
<NewCard
|
<NewCard
|
||||||
icons={['Laptop', 'Server', 'SilverBox', 'Tablet']}
|
icons={['Laptop', 'Server', 'SilverBox', 'Tablet']}
|
||||||
text="Spacedrive works best on all your devices."
|
text="Spacedrive works best on all your devices."
|
||||||
|
className="h-auto"
|
||||||
// buttonText="Connect a device"
|
// buttonText="Connect a device"
|
||||||
/>
|
/>
|
||||||
{/**/}
|
{/**/}
|
||||||
|
|
Loading…
Reference in a new issue