TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-24 03:14:03 +03:00
Code Issues Projects Releases Wiki Activity

Added AdminX tier preview static design (#17307)

Browse Source 
refs https://github.com/TryGhost/Product/issues/3580

- Added static design for tier preview and the checkmark icon it uses
This commit is contained in:
Djordje Vlaisavljevic 2023-07-11 19:55:28 +01:00 committed by GitHub
parent 828d3e4a1a
commit 9abcf9d3ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/admin-x-settings/src/admin-x-ds/assets/icons/check.svg Normal file
View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5">
<path style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;" d="m1.6 14.512 7.065 7.065 13.676-19" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 275 B

45
apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailPreview.tsx
View File

@ -1,9 +1,52 @@
import Icon from '../../../../admin-x-ds/global/Icon';
import React from 'react';
interface TierDetailPreviewProps {}
const TierDetailPreview: React.FC<TierDetailPreviewProps> = () => {
return <>Preview block</>;
return (
<div>
<div className="flex items-baseline justify-between">
<h4 className="z-10 pb-3 text-2xs font-semibold uppercase tracking-wide text-grey-700">Tier preview</h4>
<div>
</div>
</div>
<div className="flex-column relative flex min-h-[200px] min-w-[320px] max-w-[420px] items-start justify-stretch rounded border border-grey-200 bg-white p-8">
<div className="min-h-[56px] w-full">
<h4 className="-mt-1 mb-0 w-full break-words text-lg font-semibold leading-tight text-pink">Bronze</h4>
<div className="mt-4 flex w-full flex-row flex-wrap items-end justify-between gap-x-1 gap-y-[10px]">
<div className="flex justify-center text-black">
<span className="self-start text-[2.7rem] font-bold uppercase leading-[1.115]">$</span>
<span className="text-[3.4rem] font-bold leading-none tracking-tight">42</span>
<span className="ml-1 self-end text-[1.5rem] leading-snug text-grey-800">/year</span>
</div>
<span className="relative -mr-1 -mt-1 whitespace-nowrap rounded-full px-2.5 py-1.5 text-sm font-semibold leading-none tracking-wide text-grey-900">
<span className="absolute inset-0 block rounded-full bg-pink opacity-20"></span>
7 days free
</span>
</div>
<span className="mt-1 text-sm font-semibold leading-none text-pink">25% discount</span>
</div>
<div className="flex-column flex w-full flex-1">
<div className="flex-1">
<div className="mt-4 w-full text-[1.55rem] font-semibold leading-snug text-grey-900">Full access to premium content</div>
<div className="mt-4 w-full text-md leading-snug text-grey-900">
<div className="mb-2 flex items-start">
<Icon className="mr-[10px] mt-[3px] h-3.5 w-3.5 min-w-[14px] overflow-visible !stroke-[3px]" name='check' />
<div>Blogs that you can watch and listen to on your favorite podcast apps</div>
</div>
</div>
<div className="mt-4 w-full text-md leading-snug text-grey-900">
<div className="mb-2 flex items-start">
<Icon className="mr-[10px] mt-[3px] h-3.5 w-3.5 min-w-[14px] overflow-visible !stroke-[3px]" name='check' />
<div>Blogs that you can watch and listen to on your favorite podcast apps</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default TierDetailPreview;